Hoje estamos publicando uma tradução da próxima parte do manual JavaScript. Aqui falamos sobre o estilo do código e a estrutura lexical dos programas.
→
Parte 1: primeiro programa, recursos de linguagem, padrões→
Parte 2: estilo do código e estrutura do programa→
Parte 3: variáveis, tipos de dados, expressões, objetos→
Parte 4: recursos→
Parte 5: matrizes e loops→
Parte 6: exceções, ponto e vírgula, literais curinga→
Parte 7: modo estrito, esta palavra-chave, eventos, módulos, cálculos matemáticos→
Parte 8: Visão geral dos recursos do ES6→
Parte 9: Visão geral dos padrões ES7, ES8 e ES9
Estilo de programação
Um "estilo de programação" ou "padrão de codificação" ou "estilo de código" é um conjunto de convenções usadas na escrita de programas. Eles governam os recursos do design de código e o procedimento para usar construções ambíguas. No nosso caso, estamos falando de programas escritos em JavaScript. Se um programador trabalha em um determinado projeto, o estilo de código usado por ele representa seu "contrato" consigo mesmo. Se estamos falando de uma equipe, esses são acordos usados por todos os membros da equipe. O código escrito usando um determinado conjunto de regras torna a base de código de um projeto de software uniforme, melhora a legibilidade e a compreensibilidade do código.
Existem muitos guias de estilo. Aqui estão dois deles mais usados no mundo do JavaScript:
Você pode escolher qualquer um deles ou criar suas próprias regras. O mais importante é usar consistentemente as mesmas regras ao trabalhar em um determinado projeto. Além disso, se, por exemplo, você adere a um conjunto de regras e, em um projeto existente em que precisa trabalhar, suas próprias regras são usadas, você deve aderir às regras do projeto.
Você pode formatar o código manualmente ou pode usar as ferramentas de automação para esse processo. De fato, formatar o código JS e verificá-lo antes do lançamento é um grande tópico separado.
Aqui está uma de nossas publicações dedicadas às ferramentas relevantes e aos recursos de seu uso.
O estilo usado neste guia
O autor deste material, como exemplo de seu próprio guia de estilo, cita um conjunto de regras que ele tenta seguir ao escrever o código. Ele diz que o código nos exemplos se concentra na versão mais recente do padrão, disponível nas versões modernas dos navegadores. Isso significa que, para executar esse código em navegadores herdados, você precisará usar um transpiler como o
Babel . Os transpilers JS permitem converter o código gravado usando os novos recursos do idioma para que ele possa ser executado em navegadores que não suportam esses novos recursos. O transpiler pode oferecer suporte a recursos de idioma que ainda não são padrão, ou seja, não são implementados nem nos navegadores mais modernos.
Aqui está uma lista das regras em questão.
- Alinhamento. Para alinhar blocos de código, espaços são usados (2 espaços por 1 nível de alinhamento), guias não são usadas.
- Ponto e vírgula. Um ponto e vírgula não é usado.
- Comprimento da linha 80 caracteres (se possível).
- Comentários de uma linha. Tais comentários são usados no código.
- Comentários em várias linhas. Esses comentários são usados para documentar o código.
- Código não utilizado. O código não utilizado não permanece no programa comentado, caso você precise mais tarde. Esse código, se ainda for necessário, pode ser encontrado no sistema de controle de versão, se for usado, ou em algo como notas de um programador destinado a armazenar esse código.
- Comentando regras. Não há necessidade de comentar coisas óbvias; adicione comentários ao código que não ajudem a entender sua essência. Se o código se explicar graças à função bem escolhida e aos nomes de variáveis e às descrições de funções JSDoc, você não deve adicionar comentários adicionais a esse código.
- Declaração variável. As variáveis são sempre declaradas explicitamente para evitar a poluição de um objeto global. A palavra-chave
var não é usada. Se não for planejado alterar o valor de uma variável durante a execução do programa, ele será declarado na forma de uma constante (constantes semelhantes também são chamadas de "variáveis") usando a palavra-chave const , usando-a por padrão - exceto nos casos em que está planejado alterar o valor de uma variável. Nesses casos, a palavra-chave let é usada. - Constantes Se alguns valores no programa forem constantes, seus nomes serão compostos por letras maiúsculas. Por exemplo,
CAPS . Um sublinhado ( _ ) é usado para separar partes de nomes que consistem em várias palavras. - Funções Declarações de função usam sintaxe de seta. As declarações de funções regulares se aplicam apenas em casos especiais. Em particular, em métodos de objetos ou em designers. Isso é feito devido aos recursos da
this . As funções devem ser declaradas usando a palavra-chave const e, se possível, é necessário retornar explicitamente os resultados de seu trabalho. O uso de funções aninhadas não é proibido para ocultar alguns mecanismos auxiliares do código principal.
Aqui está um exemplo de um par de funções simples de seta:
const test = (a, b) => a + b const another = a => a + 2
- Nomeando Entidades. Os nomes de funções, variáveis e métodos de objetos sempre começam com uma letra minúscula; os nomes que consistem em várias palavras são escritos usando um estilo camel (nomes como
camelCase ). Somente os nomes das funções e classes do construtor começam com uma letra maiúscula. Se você usar uma estrutura que possui requisitos especiais para nomear entidades, use as regras prescritas por ela. Os nomes dos arquivos devem consistir em letras minúsculas, as palavras separadas nos nomes são separadas por traços ( - ). - Regras para construir e formatar expressões.
se Aqui estão algumas maneiras de escrever uma
if condicional:
if (condition) { statements } if (condition) { statements } else { statements } if (condition) { statements } else if (condition) { statements } else { statements }
para . Para organizar loops, é usado o padrão
for construção, um exemplo do qual é dado abaixo ou o loop for.
for in .hasOwnProperty() for in devem ser evitados - a menos que sejam usados com a construção
.hasOwnProperty() . Aqui está um diagrama de loop for:
for (initialization; condition; update) { statements }
enquanto Aqui está um exemplo esquemático de um
while :
while (condition) { statements }
faça . Aqui está a estrutura
do loop do:
do { statements } while (condition);
interruptor . A seguir, é apresentado um diagrama da
switch condicional do
switch :
switch (expression) { case expression: statements default: statements }
tente . Aqui estão algumas opções de design para a construção
try-catch . O primeiro exemplo mostra essa construção sem um bloco
finally , o segundo com esse bloco.
try { statements } catch (variable) { statements } try { statements } catch (variable) { statements } finally { statements }
- Espaços . Os espaços devem ser usados com sabedoria, ou seja, para que contribuam para melhorar a legibilidade do código. Portanto, os espaços são colocados após as palavras-chave seguidas por um parêntese de abertura; elas são cercadas por operadores que se aplicam a dois operandos (
+ , - , / , * , && e outros). Os espaços são usados dentro do loop for , após cada ponto e vírgula, para separar partes do cabeçalho do loop. O espaço é colocado após a vírgula. - Linhas vazias . Linhas vazias marcam blocos de código contendo operações logicamente conectadas entre si.
- Aspas . Ao trabalhar com seqüências de caracteres, são usadas aspas simples (
' ), não aspas duplas ( " ). Geralmente, as aspas duplas são encontradas em atributos HTML; portanto, o uso de aspas simples ajuda a evitar problemas ao trabalhar com seqüências de caracteres HTML. Se você precisar executar algumas operações com seqüências de caracteres, isso implica , por exemplo, sua concatenação, literais de modelo devem ser usados, desenhados usando backticks ( ` ).
A estrutura lexical do código JavaScript
Vamos falar sobre os blocos de construção do código JavaScript. Em particular, sobre o uso da codificação Unicode, sobre ponto e vírgula, espaços, sobre a sensibilidade da linguagem ao caso de caracteres, sobre comentários, sobre literais, sobre identificadores e sobre palavras reservadas.
▍Unicode
O código JavaScript é representado usando a codificação Unicode. Isso, em particular, significa que no código, você pode usar, digamos, caracteres emoticons como nomes de variáveis. Para isso, é claro, não é recomendado. É importante aqui que os nomes dos identificadores, sujeitos a certas
regras , possam ser escritos em qualquer idioma, por exemplo, em japonês ou chinês.
▍ ponto e vírgula
A sintaxe do JavaScript é semelhante à sintaxe C. Você pode encontrar muitos projetos nos quais, no final de cada linha, há um ponto e vírgula. No entanto, ponto e vírgula no final das linhas em JavaScript são opcionais. Na grande maioria dos casos, você pode fazer sem ponto e vírgula. Os desenvolvedores que, antes do JS, usavam idiomas nos quais um ponto-e-vírgula não é aplicado, tendem a evitá-los no JavaScript.
Se, ao escrever um código, você não usa construções estranhas ou não inicia a linha entre parênteses ou colchete, em 99,9% dos casos você não cometerá um erro (se houver, o linter pode avisá-lo sobre um possível erro). Para "designs estranhos", por exemplo, podemos atribuir isso:
return variable
Usar ou não um ponto-e-vírgula é uma questão pessoal para todos os programadores. O autor deste manual, por exemplo, diz que decidiu não usar ponto-e-vírgula onde eles não são necessários, como resultado, eles são extremamente raros nos exemplos dados aqui.
▍ Lacunas
JavaScript não presta atenção aos espaços. Obviamente, em certas situações, a ausência de um espaço levará a um erro (além de um espaço inadequado onde não deveria estar), mas muitas vezes não há diferença entre a ausência de um espaço em uma determinada parte do programa e a presença de um ou mais espaços. Uma declaração semelhante é verdadeira não apenas para espaços, mas também para feeds de linha e para guias. Isso é especialmente perceptível, por exemplo, em um código minificado. Veja, por exemplo, em qual código processado com o
Closure Compiler se transforma.
Em geral, deve-se notar que, ao formatar o código do programa, é melhor não ir ao extremo, aderindo a um determinado conjunto de regras.
▍ Sensibilidade do caso
JavaScript é uma linguagem que diferencia maiúsculas de minúsculas. Isso significa que ele distingue, por exemplo, os nomes das variáveis
something e
Something . O mesmo vale para qualquer identificador.
▍ Comentários
Você pode usar dois tipos de comentários em JavaScript. O primeiro tipo são comentários de linha única:
//
Eles, como o nome indica, estão localizados em uma linha. Tudo o que segue os caracteres
// é considerado um comentário.
O segundo tipo são comentários de várias linhas:
/* */
Aqui, o comentário é tudo o que há entre a combinação dos caracteres
/* e
*/ .
▍ Literais e identificadores
Um literal é um certo valor escrito no código fonte de um programa. Por exemplo, pode ser uma sequência, um número, um valor lógico ou uma estrutura mais complexa - um literal de objeto (permite criar objetos, formatados com chaves) ou um literal de matriz (permite criar matrizes formatadas usando colchetes). Aqui estão alguns exemplos:
5 'Test' true ['a', 'b'] {color: 'red', shape: 'Rectangle'}
Não haverá nenhum benefício particular ao lançar um programa no qual essas construções são encontradas. Para trabalhar com literais em programas, eles são primeiro atribuídos a variáveis ou passados para funções.
Um identificador é uma sequência de caracteres que pode ser usada para identificar uma variável, função, objeto. Pode começar com uma letra, um cifrão (
$ ) ou um sublinhado (
_ ), pode conter números e, se necessário, caracteres Unicode como emoticons (embora, como já mencionado, seja melhor não fazer isso). Aqui estão alguns exemplos de identificadores:
Test test TEST _test Test1 $test
O cifrão é comumente usado ao criar identificadores que armazenam referências a elementos DOM.
▍ Palavras reservadas
A seguir, é apresentada uma lista de palavras reservadas pelo idioma. Você não pode usá-los como identificadores.
breakdoinstanceoftypeofcaseelsenewvarcatchfinallyreturnvoidcontinueforswitchwhiledebuggerfunctionthiswithdefaultifthrowdeleteintryclassenumextendssuperconstexportimportimplementsletprivatepublicinterfacepackageprotectedstaticyield
Sumário
Hoje discutimos o estilo e a estrutura dos programas escritos em JavaScript. Da próxima vez, falaremos sobre variáveis, tipos de dados, expressões e objetos.
Caros leitores! Qual guia de estilo JavaScript você usa?