Especificação
Este é o padrão de escrita de código seguido e acordado pela equipe de desenvolvimento front-end, que visa melhorar a padronização e facilidade de manutenção do código.
Princípios básicos
Cumprir os padrões web, HTML semântico, separação de estrutura, desempenho e comportamento, e excelente compatibilidade em termos de desempenho da página, o código deve ser conciso, claro e ordenado, para reduzir ao máximo a carga do servidor e garantir o desempenho. velocidade de análise mais rápida.
especificação geral
1. Ignorar (Omitir) protocolo: como background: url(http://www.google.com/images/example); Você deve escrever background: url(//www.google.com/images/example); facilitar a troca de http com o protocolo https, a menos que um determinado protocolo deva ser usado
2. Use o IDE para obter um recuo de nível claro ao escrever. A tecla tab é substituída por quatro espaços.
Como as ferramentas de edição de diferentes sistemas interpretam as guias de maneira diferente, a tecla tab no Windows ocupa quatro espaços, enquanto no Linux ocupa oito espaços (a menos que você mesmo defina a ocupação da tecla tab. comprimento da posição).
Por exemplo, texto sublime, você pode definir a tecla tab nesta ferramenta.
3. Use letras minúsculas para atributos de rótulo
4. Não deixe espaços no final para evitar diferenças
5. Use UTF-8 (sem BOM) e adicione <meta charset="utf-8″> ao documento
6. Use “.js” minúsculo para nomear arquivos e recomende “-” em vez de “_”
7.TODO(contato) e TODO: item de ação, não use @@
Especificação de refinamento HTML
1. Especificações para usar html5 <!DOCTYPE html>
2. O formato padrão da tag <img> é: <img src="xxx.png" alt="default text" /> para evitar o problema src=""
3. Formato padrão da tag <a>: <a href="###" title="Link name">xxx</> Nota: target="_blank" é determinado de acordo com as necessidades
4. A tag <a> reserva espaços reservados para links usando ###, veja: um problema de espaço reservado para tags
5. Ao escrever o endereço do link, deve-se evitar o redirecionamento, por exemplo: href="http://itaolun.com/", ou seja, deve-se adicionar "/" após o endereço URL.
6. Todas as tags precisam ser fechadas em conformidade com os padrões XHTML
7. Utilize sempre a mesma forma de escrita da barra no final da tag: <br /> <hr /> Preste atenção no espaço entre
8. Evite usar tags desatualizadas, como: <b> <u> <i> e substitua-as por <strong> <em> etc.
9. Use data-xxx para adicionar dados personalizados, como: <input data-xxx="yyy"/>
10. Evite usar símbolos especiais style="xxx:xxx;" em folhas de estilo embutidas usando entidades de símbolos HTML de referência
11. Os rótulos devem ser adicionados aos elementos descritivos do formulário (input, textarea), como <p>Nome: <input type="text" id="name" name="name" /></p> deve ser escrito como : < p><label for=”nome”>Nome: </label><input type=”text” id=”nome” /></p>
Especificação de refinamento CSS
1. Adicione ";" após cada atributo de estilo
Ferramenta de compressão conveniente "segmentação de frases".
2. Nomenclatura de classe, use "-" [conector de sinal de menos] para separar as letras da classe:
Separar com "-" é mais claro do que usar camel case.
Linha de produto-produto-módulo-submódulo, você também pode usar este método ao nomear
ID: nomenclatura CamelCase como:
primeiro nome topBoxList rodapéCopyright
3. À utilização dos espaços aplicam-se as seguintes regras:
.conteúdo do hotel {
peso da fonte: negrito;
} Deve haver um espaço antes do seletor e {. O nome do atributo deve ter um espaço depois: O nome do atributo deve ter um espaço depois: Uma razão para adicionar espaços antes (proibido) é a estética. . Cutuque o bicho.
4. (Recomendado) Ordem de escrita dos atributos, por exemplo:
.conteúdo do hotel {
/*posição*/
exibição: bloco;
posição: absoluta;
esquerda: 0;
superior: 0;
/* Modelo da caixa */
largura: 50px;
altura: 50px;
margem: 10px;
borda: 1px preto sólido;
/ *outro* /
cor: #efefef;
}Relacionados ao posicionamento, os mais comuns incluem: posição de exibição, flutuador superior esquerdo, etc. Relacionados ao modelo de caixa, os mais comuns incluem: largura, altura, margem, preenchimento, borda e outros atributos.
Escrever nesta ordem pode melhorar o desempenho da renderização DOM do navegador. Por exemplo, se a largura e a altura da imagem na página da web não forem definidas, antes de a imagem ser carregada, o espaço que ela ocupa é 0, mas depois é. carregado, , o espaço 0 é repentinamente esticado, o que fará com que os elementos abaixo dele sejam reorganizados e renderizados, causando repintura e refluxo. Quando escrevemos CSS, colocamos primeiro o posicionamento dos elementos. Primeiro, informamos ao navegador se o elemento está dentro ou fora do fluxo de texto e onde ele está na página. borda, etc. Esses atributos que ocupam espaço e outros atributos são renderizados dentro desta área fixa. Isso é basicamente o que significa ~.
Artigos recomendados:
Resultados da enquete: Como você ordena suas propriedades CSS?
http://www.mozilla.org/css/base/content.css
5. (Recomendado) Ao escrever estilos para uma estrutura HTML específica, use nome do elemento + nome da classe
/* Todas as navegações são escritas para ul*/
ul.nav {
...
} ".a div" e ".a div.b", por que o último é melhor? Se as necessidades mudarem e um div extra for adicionado em ".a", o estilo inicial afetará os divs subsequentes?
6. (Não recomendado) Use filtro, ou seja, (Proibido) use expressão
A questão principal aqui é a eficiência. Você deve prestar atenção especial a isso e usar menos coisas que queimem a CPU ~.
7. Os comentários CSS são representados por "/* */". Ao comentar em uma única linha, o objeto anotado e os caracteres de comentário anteriores e seguintes retêm um espaço e ocupam uma linha separada ao comentar em várias linhas, o comentário inicial; O caractere e o caractere de comentário final ocupam uma linha cada. Por exemplo:
/* CSS do comentário */
/*
mesa {
colapso da fronteira: colapso;
}
*/Especificação de refinamento JS
1. Quebra de linha
Cada linha de código deve ter menos de 120 caracteres. Se for maior que esse número, você pode considerar uma nova linha como "." ou "+" no final da linha. a nova linha deve ser recuada mais um nível antes da nova linha.
Se os parâmetros de uma função ou método forem longos, divida-os adequadamente.
São proibidas quebras de linha entre a palavra-chave return e a expressão a ser retornada. Por exemplo:
// O que realmente é retornado é indefinido, não 1
teste de função() {
retornar
1;
} 2. Linhas de código
É proibido escrever múltiplas declarações curtas em uma linha, ou seja, escrever apenas uma declaração em uma linha.
Declarações como if, for, do, while, switch, case, default, break e continue ocupam sua própria linha.
Todos os corpos de loop e instruções de execução de órgãos de julgamento, como if, for, do, while, etc., precisam ser colocados entre "{}", e chaves não podem ser omitidas. Por exemplo:
// Errado se (i < 5) i += 1;
// Corrija se (i < 5) {
eu += 1
} 3. Alinhamento <br />O delimitador {} do bloco de código, "{" segue a linha anterior e é separado por um espaço na frente, "}" deve ocupar uma linha exclusiva e estar localizado na mesma coluna, sendo alinhados à esquerda com as afirmações que se referem a eles.
O método de indentação acima deve ser usado no início do corpo da função, na definição da classe e nos programas nas instruções if, for, do, while, switch e case.
4. Espaço
Deve haver um espaço após a palavra-chave para destacá-la.
Não pode haver espaços entre nomes de funções, nomes de métodos e o colchete esquerdo "(", por exemplo:
// Função errada getInfo() {
//código
}
// Função correta getInfo() {
//código
}Ao declarar uma expressão de função, nenhum espaço pode ser deixado entre a função e o colchete esquerdo "(", por exemplo:
// Var usuário = function () { errado
//código
}
// Corrija var user = function() {
//código
} Adicione um espaço após a vírgula.
Operadores de atribuição, operadores de comparação, operadores aritméticos, operadores lógicos, operadores de campo de bits, como "=", "+=" ">=", "<=", "+", "*", "% ", "&& ", "||" e outros operadores binários devem ser precedidos e seguidos por espaços.
Não há espaços antes e depois de operadores unários como "!", "~", "++", "--" e "&" (operador de endereço).
Não há espaços antes e depois de "." e "[]".
5. Linha em branco
Adicione uma linha em branco após cada declaração de classe e no final de cada definição de função.
Dentro de um corpo de função, declarações logicamente relacionadas não devem ser separadas por linhas em branco, e outros locais devem ser separados por linhas em branco.
6. Use operadores condicionais estritos. Use === em vez de == e !== em vez de !=
7. Evite vírgulas extras. Por exemplo: var arr = [1,2,3,]
8. Todas as instruções devem terminar com ponto e vírgula, exceto function, if, switch, try e while.
9. Coloque a chave esquerda no final da linha e a chave direita no início da linha.
10. Não é recomendado usar new para construir os seguintes tipos de objetos: novo Número, nova String, novo Booleano, novo Objeto (substituir por {}), novo Array (substituir por []).
11. Deve haver um espaço após "," entre os membros do array.
12. É proibido usar nomenclatura de palavras-chave reservadas javascript em js/json, o que pode facilmente causar erros no IE. Palavras-chave (break, case, catch, continue, default, delete, do, else, finalmente, for, function, if, in, instanceof, new, return, switch, this, throw, try, typeof, var, void, while , com), palavras-chave (abstrato, booleano, byte, char, classe, con st, depurador, duplo, enum, exportar, estende, fimal, float, goto, implementa, importar, int, interface, longo, mativo, pacote, privado, protegido, público, curto, estático, super, sincronizado, lança, transiente, volátil).
13. Recomenda-se usar "+" como conector de nova linha em vez de "".
14. As informações de prompt são proibidas de usar descrições de linguagem geral. Elas devem ser concisas e claras. Ao visualizar as informações, você pode localizar imediatamente o erro. Por exemplo, ao solicitar informações do usuário para relatar um erro, use "Este usuário não existe. " em vez de "Os dados retornados pelo plano de fundo estão incorretos", "Tempo limite da rede".