tutoriais mais recente desenvolvimento web
 

JavaScript Guia de estilo e convenções de codificação


Utilize sempre as mesmas convenções de codificação para todos os seus projetos de JavaScript.


Convenções de codificação JavaScript

Codificação convenções são diretrizes de estilo para a programação. Eles geralmente cobrem:

  • regras de nomeação e de declaração para variáveis ​​e funções.
  • Regras para o uso de espaço em branco, recuo, e comentários.
  • Programação práticas e princípios

Convenções de codificação de qualidade seguro:

  • Melhora a legibilidade do código
  • Faça a manutenção do código mais fácil

Convenções de codificação pode ser documentado regras para as equipas de seguir, ou ser apenas a sua prática de codificação individual.

Esta página descreve as convenções gerais de código JavaScript usados ​​pelo w3ii.
Você também deve ler o próximo capítulo "Melhores Práticas", e aprender como evitar codificação de armadilhas.


Os nomes das variáveis

No w3ii usamos camelCase para nomes de identificadores (variáveis e funções).

Todos os nomes começam com uma letra.

Na parte inferior desta página, você vai encontrar uma discussão mais ampla sobre as regras de nomenclatura.

firstName = "John";
lastName = "Doe";

price = 19.90;
tax = 0.20;

fullPrice = price + (price * tax);

Espaços em torno Operadores

Sempre coloque espaços em torno operadores ( = + - * / ) , e depois de vírgula:

Exemplos:

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

código Indentation

Sempre usar 4 espaços de recuo dos blocos de código:

Funções:

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

Não use abas (tabulações) para recuo. Diferentes editores interpretar abas de forma diferente.


Regras Declaração

As regras gerais de declarações simples:

  • Sempre terminar uma simples declaração com um ponto e vírgula.

Exemplos:

var values = ["Volvo", "Saab", "Fiat"];

var person = {
    firstName: "John",
    lastName: "Doe",
    age: 50,
    eyeColor: "blue"
};

As regras gerais de declarações (compostos) complexos:

  • Colocar o suporte de abertura na extremidade da primeira linha.
  • Use um espaço antes do parêntese de abertura.
  • Coloque o colchete de fechamento em uma nova linha, sem espaços à esquerda.
  • Não termine uma declaração complexo com um ponto e vírgula.

Funções:

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

Loops:

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

Condicionais:

if (time < 20) {
    greeting = "Good day";
} else {
    greeting = "Good evening";
}

Regras de objetos

As regras gerais de definições de objetos:

  • Coloque o suporte de abertura na mesma linha que o nome do objeto.
  • Utilizar os dois pontos mais um espaço entre cada propriedade e seu valor.
  • Use aspas em torno de valores de cadeia, não em torno de valores numéricos.
  • Não adicione uma vírgula após o último par de propriedade de valor.
  • Coloque o suporte de fechamento em uma nova linha, sem espaços à esquerda.
  • Sempre terminar uma definição de objeto com um ponto e vírgula.

Exemplo

var person = {
    firstName: "John",
    lastName: "Doe",
    age: 50,
    eyeColor: "blue"
};

objetos curtas pode ser escrito comprimido, em uma linha, usando espaços única entre as propriedades, como este:

var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};

Linha Comprimento <80

Para facilitar a leitura, evitar filas mais de 80 caracteres.

Se uma instrução JavaScript não se encaixa em uma linha, o melhor lugar para quebrá-lo, é depois de um operador ou uma vírgula.

Exemplo

document.getElementById("demo").innerHTML =
    "Hello Dolly.";
Tente você mesmo "

Convenções de nomenclatura

Use sempre a mesma convenção de nomenclatura para todo o seu código. Por exemplo:

  • Nomes de variáveis e funções escrito como camelCase
  • As variáveis globais escritas em MAIÚSCULAS (Nós não, mas é bastante comum)
  • Constantes (como PI) escritas em MAIÚSCULAS

Se você usar Hyp-galinhas, camelCase, ou under_scores em nomes de variáveis?

Esta é uma pergunta programadores muitas vezes discutir. A resposta depende de quem você perguntar:

Hífens em HTML e CSS:

HTML5 atributos pode começar com data- (-quantidade de dados, a preço de dados).

CSS usa hífens em imóveis de nomes (font-size).

Hífens pode ser confundido como tentativas de subtração. Hífens não são permitidos em nomes de JavaScript.

ressalta:

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

Sublinhados são muitas vezes utilizados na documentação PHP.

PascalCase:

PascalCase é muitas vezes preferido por programadores C.

camelCase:

camelCase é utilizado por si só JavaScript, por jQuery, e outras bibliotecas JavaScript.

Não comece nomes com um sinal $. Ele vai colocá-lo em conflito com muitos nomes de biblioteca de JavaScript.


Carregando JavaScript em HTML

Utilize sintaxe simples para carregar scripts externos (o atributo de tipo não é necessário):

<script src="myscript.js">

Acessando Elementos HTML

A consequência do uso "desordenados" estilos HTML, pode resultar em erros de JavaScript.

Estas duas instruções JavaScript irá produzir resultados diferentes:

var obj = getElementById("Demo")

var obj = getElementById("demo")

Se possível, use a mesma convenção de nomenclatura (como JavaScript) em HTML.

Visite o Guia de Estilo do HTML .


Extensões de arquivos

Arquivos HTML deve ter uma extensão .html (não .htm).

Arquivos CSS deve ter uma extensão .css.

Arquivos JavaScript deve ter uma extensão .js.


Use minúsculas nomes de arquivo

A maioria dos servidores web (Apache, Unix) são sensíveis caso sobre os nomes dos arquivos:

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

Outros servidores web (Microsoft, IIS) não são case sensitive:

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

Se você usar uma mistura de letras maiúsculas e minúsculas, você tem que ser extremamente consistente.

Se você se move de um caso insensível, para um servidor sensível caso, até mesmo pequenos erros podem quebrar o seu web site.

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


atuação

Codificação convenções não são usados ​​por computadores. A maioria das regras têm pouco impacto sobre a execução dos programas.

Indentação e espaços extras não são significativos em pequenas scripts.

Para o código em desenvolvimento, capacidade de leitura deve ser preferida. scripts de produção maiores devem ser minified.