Sempre use as mesmas convenções de codificação para todo o seu JavaScript projetos.
As convenções de codificação são diretrizes de estilo para programação. Eles normalmente cobrem:
Regras de nomenclatura e declaração para variáveis e funções.
Regras para o uso de espaços em branco, recuo e comentários.
Práticas e princípios de programação.
Convenções de codificação qualidade segura:
Melhore a legibilidade do código
Facilite a manutenção do código
As convenções de codificação podem ser regras documentadas a serem seguidas pelas equipes ou apenas sua prática de codificação individual.
Esta página descreve as convenções gerais de código JavaScript usadas pelo W3Schools.
Você também deve ler o próximo capítulo "Melhores Práticas" e aprender como evitar armadilhas de codificação.
Na W3schools usamos camelCase para nomes de identificadores (variáveis e funções).
Todos os nomes começam com uma letra.
No final desta página, você encontrará uma discussão mais ampla sobre nomenclatura regras.
firstName = "John";
lastName = "Doe";
price = 19.90;
tax = 0.20;
fullPrice = price + (price * tax);Sempre coloque espaços ao redor dos operadores (=+ - */) e depois das vírgulas:
let x = y + z;
const myArray = ["Volvo", "Saab",
"Fiat"];Sempre use 2 espaços para indentação de blocos de código:
function toCelsius(fahrenheit) {
return (5 / 9) * (fahrenheit - 32);
}Não use guias (tabuladores) para recuo. Diferentes editores interpretam as guias de maneira diferente.
Regras gerais para declarações simples:
Sempre termine uma declaração simples com ponto e vírgula.
const cars = ["Volvo", "Saab",
"Fiat"];
const person = {
firstName: "John",
lastName: "Doe",
age: 50,
eyeColor:
"blue"
};Regras gerais para declarações complexas (compostas):
Coloque o colchete de abertura no final da primeira linha.
Use um espaço antes do colchete de abertura.
Coloque o colchete de fechamento em uma nova linha, sem espaços iniciais.
Não termine uma instrução complexa com ponto e vírgula.
function toCelsius(fahrenheit) {
return (5 / 9) * (fahrenheit - 32);
}for (let i = 0; i < 5; i++) {
x += i;
}if (time < 20) {
greeting = "Good day";
} else {
greeting = "Good evening";
}Regras gerais para definições de objetos:
Coloque o colchete de abertura na mesma linha do nome do objeto.
Use dois pontos mais um espaço entre cada propriedade e seu valor.
Use aspas em torno de valores de string, não em torno de valores numéricos.
Não adicione uma vírgula após o último par propriedade-valor.
Coloque o colchete de fechamento em uma nova linha, sem espaços principais.
Sempre termine uma definição de objeto com ponto e vírgula.
Objetos curtos podem ser escritos compactados, em uma linha, usando apenas espaços entre propriedades, assim:
Para facilitar a leitura, evite linhas com mais de 80 personagens.
Se uma instrução JavaScript não couber em uma linha, o melhor lugar para quebrar isto, vem depois de um operador ou uma vírgula.
document.getElementById("demo").innerHTML =
"Hello Dolly.";Experimente você mesmo →
<!DOCTYPE html>
<html>
<body>
<h2>My Web Page</h2>
<p>The best place to break a code line is after an operator or a comma.</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
"Hello Dolly.";
</script>
</body>
</html>
Sempre use a mesma convenção de nomenclatura para todo o seu código. Por exemplo:
Nomes de variáveis e funções escritos como camelCase
Variáveis globais escritas em MAIÚSCULAS (Não usamos, mas é bastante comum)
Constantes (como PI) escritas em MAIÚSCULAS
Você deve usar hyp-hens, camelCase ou under_scores em nomes de variáveis?
Esta é uma questão que os programadores frequentemente discutem. A resposta depende de quem você perguntar:
Hífens em HTML e CSS:
Os atributos HTML5 podem começar com data- (quantidade de dados, preço de dados).
CSS usa hífens em nomes de propriedades (tamanho da fonte).
Os hífens podem ser confundidos com tentativas de subtração. Hífens não são permitidos em nomes JavaScript.
Sublinhados:
Muitos programadores preferem usar sublinhados (data_de_nascimento), especialmente em SQL bancos de dados.
Os sublinhados são frequentemente usados na documentação do PHP.
PascalCaso:
PascalCase é frequentemente preferido por programadores C.
cameloCaso:
camelCase é usado pelo próprio JavaScript, por jQuery e outros JavaScript bibliotecas.
Não comece os nomes com o sinal $. Isso colocará você em conflito com muitos nomes de bibliotecas JavaScript.
Use sintaxe simples para carregar scripts externos (o atributo type não é necessário):
<script src="myscript.js"></script>Uma consequência do uso de estilos HTML "desarrumados" pode resultar em erros de JavaScript.
Estas duas instruções JavaScript produzirão resultados diferentes:
const obj = getElementById("Demo")
const obj = getElementById("demo")Se possível, use a mesma convenção de nomenclatura (como JavaScript) em HTML.
Visite o Guia de estilo HTML.
Os arquivos HTML devem ter uma extensão .html (.htm é permitido). <p>Arquivos CSS devem ter uma extensão .css.
Os arquivos JavaScript devem ter uma extensão .js.
A maioria dos servidores web (Apache, Unix) diferencia maiúsculas de minúsculas em relação aos nomes de arquivos:
london.jpg não pode ser acessado como London.jpg.
Outros servidores web (Microsoft, IIS) não diferenciam maiúsculas de minúsculas:
london.jpg pode ser acessado como London.jpg ou london.jpg.
Se você usar uma mistura de maiúsculas e minúsculas, terá que ser extremamente consistente.
Se você passar de um servidor que não diferencia maiúsculas de minúsculas para um servidor que diferencia maiúsculas de minúsculas, mesmo pequenos erros podem danificar seu site.
Para evitar esses problemas, sempre use nomes de arquivos em letras minúsculas (se possível).
As convenções de codificação não são usadas por computadores. A maioria das regras tem pouco impacto na execução dos programas.
O recuo e os espaços extras não são significativos em scripts pequenos.
Para código em desenvolvimento, a legibilidade deve ser preferida. Maior produção os scripts devem ser minimizados.