Guia de estilo JavaScript

Sempre use as mesmas convenções de código para todos seus projetos JavaScript.

Convenções de código JavaScript

Convenções de código (Coding conventions) se referem aDiretrizes de estilo de programaçãoEsses princípios geralmente incluem:

  • Regras para o nome e declaração de variáveis e funções
  • Regras para o uso de espaços, recuos e comentários
  • Hábitos e princípios de programação

Convenções de códigoGarantir a qualidade:

  • Melhorar a legibilidade do código
  • Melhorar a manutenibilidade do código

As convenções de código podem ser regras escritas que a equipe observa, ou suas próprias hábitos de codificação pessoais.

Esta página introduce as convenções de código JavaScript genéricas usadas no CodeW3C.com.

Você deve continuar lendo o próximo capítulo "Práticas recomendadas", aprendendo como evitar armadilhas de codificação.

nomes de variáveis

No CodeW3C.com, usamosCaixa alta.

Todos os nomes começam comLetrasComeço.

Na parte inferior dessa página, discutiremos mais amplamente as regras de nomeação.

firstName = "Bill";
lastName = "Gates";
preco = 19.90;
imposto = 0.20;
precoTotal = preco + (preco * imposto);

Espaço ao redor de operadores

Sempre insira espaço ao redor de operadores ( = + - * / ) e após vírgulas

Exemplo

var x = y + z;
var valores = ["Volvo", "Saab",  "Fiat"];

Recuo de código

Use sempre 4 espaços para recuo em bloco de código

Função

function paraCelsius(fahrenheit) {
    return (5 / 9) * (fahrenheit - 32);
}

Não use tabulações para recuo. Diferentes editores interpretam tabs de maneiras diferentes.

Regras de instruções

Regras gerais para instruções simples:

Sempre termine uma instrução com ponto-e-vírgula

Exemplo

var valores = ["Volvo", "Saab",  "Fiat"];
var pessoa = {
    firstName: "Bill",
     lastName: "Gates",
    age: 50,
    eyeColor:  "blue"
};

Regras gerais para frases complexas (compound):

  • Escreva o abre-parênteses no final da primeira linha
  • Use um espaço antes do abre-parênteses
  • Escreva o fechamento de parênteses em uma nova linha, sem espaços em branco à frente
  • Não termine frases complexas com ponto-e-vírgula

Função:

function paraCelsius(fahrenheit) {
    return (5 / 9) * (fahrenheit - 32);
}

Loop:

for (i = 0; i < 5; i++) {
    x += i;
}

Condição:

if (tempo < 20) {
    saudacao = "Bom dia";
} else {
     saudacao = "Boa noite";
}

Regras de objetos

Regras gerais para definição de objetos:

  • Coloque o abre-parênteses e o nome do objeto na mesma linha
  • Use dois pontos seguidos de um espaço entre cada atributo e seu valor
  • Não insira vírgula após o último par de valor de atributo
  • Escreva o fechamento de parênteses em uma nova linha, sem espaços em branco à frente
  • Sempre termine a definição do objeto com um ponto-e-vírgula

Exemplo

var pessoa = {
    firstName: "Bill",
    lastName: "Gates",
    age: 19,
    eyeColor:  "blue"
};

Pode compactar objetos em uma linha, usando apenas espaços entre os atributos, assim:

var pessoa = {firstName:"Bill", lastName:"Gates", age:50, eyeColor:"blue"};

Comprimento da linha menor que 80

Para melhorar a legibilidade, evite que cada linha ultrapasse 80 caracteres.

Se a sentença JavaScript ultrapassar o comprimento de uma linha, o melhor lugar para quebrar é após o operador ou vírgula.

Exemplo

document.getElementById("demo").innerHTML =
    "Hello Kitty.";

Experimente pessoalmente

Convenção de nomes

Sempre use a mesma convenção de nomes em todos seus códigos. Por exemplo:

  • Nomes de variáveis e funções usamCaixa alta e caixa baixa mistapara escrever
  • Variáveis globais usamMaiúsculas(Nós não fazemos isso, mas é muito comum)
  • Constantes (como PI) usamMaiúsculas

Devemos usar em nomes de variáveis?Hífens、Caixa alta e caixa baixa mistaouSublinhadosSim?

Este é um problema frequentemente discutido pelos programadores. A resposta depende de quem está respondendo a essa pergunta:

Hífens em HTML e CSS:

Atributos HTML5 podem começar com data- (data-quantity, data-price).

CSS usa hífens nos nomes de propriedades (font-size).

Hífens podem ser mal interpretados como operadores de subtração. Nomes de JavaScript não permitem o uso de hífens.

Sublinhados:

Muitos programadores gostam de usar sublinhados (date_of_birth), especialmente em bancos de dados SQL.

Sublinhados são frequentemente usados em documentação PHP.

Convenção PascalCase:

Programadores de C frequentemente usam a convenção PascalCase.

Caixa alta e caixa baixa mista (camelCase):

JavaScript, jQuery e outras bibliotecas JavaScript usam caixa alta e caixa baixa mista (camelCase).

Não comece os nomes de JavaScript com o símbolo $. Isso pode causar conflitos de nomes de JavaScript.

Carregar JavaScript no HTML

Use uma sintaxe simples para carregar scripts externos (o atributo type não é necessário):

<script src="myscript.js"></script>

Acesso a elementos HTML

As consequências de usar estilos HTML "desleais", talvez causem erros no JavaScript.

Essas duas sentenças JavaScript produzem resultados diferentes:

var obj = getElementById("Demo")
var obj = getElementById("demo")

Se possível, use a convenção de nomes idêntica no HTML (como no JavaScript).

Acesse a Guia de Estilos HTML.

Extensões de arquivo

Os arquivos HTML devem usar .html Extensões (ao invés de .htm)

Os arquivos CSS devem usar .css Extensões.

Os arquivos JavaScript devem usar .js Extensões.

Use nomes de arquivo em minúsculas

A maioria dos servidores web (Apache, Unix) são sensíveis a maiúsculas e minúsculas no nome dos arquivos:

london.jpg não pode ser acessado como London.jpg.

Outros servidores web (Microsoft IIS) são insensíveis a maiúsculas e minúsculas:

london.jpg pode ser acessado como London.jpg ou london.jpg.

Se você misturar maiúsculas e minúsculas, deve manter uma continuidade e consistência rigorosas.

Se você transferir o site de um servidor insensível a maiúsculas e minúsculas para um servidor sensível a maiúsculas e minúsculas, até esses pequenos erros podem danificar seu site.

Para evitar esses problemas, sempre use nomes de arquivo em minúsculas (se possível).

Desempenho

Os computadores não usam convenções de código. A maioria das regras tem um impacto muito pequeno na execução do programa.

O recuo e os espaços adicionais não são importantes para scripts curtos.

Para scripts em desenvolvimento, deve-se dar prioridade à legibilidade. Grandes scripts de produção devem ser encurtados.