js convenção de nomenclatura
Os identificadores na especificação ECMAScript estão no formato camel case, e o método de nomenclatura camel case começa com uma letra minúscula (maiúscula), e a primeira letra de cada palavra subseqüente é maiúscula. Dependendo se a primeira letra é maiúscula, existem duas maneiras:
- Pascal Case nomenclatura maiúscula: coloque a primeira letra em maiúscula. por exemplo: StudentInfo, UserInfo, ProductInfo
- Camel Case Nomenclatura camel case pequena: a primeira letra é minúscula. por exemplo: StudentInfo, userInfo, productInfo
Os identificadores incluem variáveis, nomes de funções, nomes de classes, nomes de atributos e parâmetros de funções ou classes. Cada método de nomenclatura é ligeiramente diferente. Veja a seguir uma explicação detalhada:
1. Nomenclatura do projeto
Tudo em letras minúsculas, separados por sublinhados.
Exemplo: meu_projeto_nome
2. Nomenclatura do diretório
Consulte as regras de nomenclatura do projeto; quando houver uma estrutura plural, deve-se adotar a nomenclatura plural.
Exemplo: scripts, estilos, imagens, data_models
3. Nomenclatura de arquivo JS
- Variáveis: Deve usar camelCase inferior.
Convenção de nomenclatura: o prefixo deve ser um substantivo. (Nomes de função são prefixados com verbos para distinguir variáveis de funções)
Sugestão de nomenclatura: Tente refletir o tipo no nome da variável, como: comprimento, contagem, etc. representam tipos numéricos e incluem nome e título para representar tipos de string.
// 好的命名方式
let maxCount = 10;
let tableTitle = 'LoginTable';
// 不好的命名方式
let setCount = 10;
let getTitle = 'LoginTable';
- Constantes: Todos os nomes em letras maiúsculas devem ser usados, e as palavras são separadas por _ . Constantes são geralmente usadas para url de solicitação ajax e alguns dados que não serão alterados
Convenção de nomenclatura: use letras maiúsculas e sublinhados para combinar nomes e sublinhados para separar palavras.
const MAX_COUNT = 10;
const URL = 'http://www.foreverz.com';
- função
- Método de nomeação: método de nomeação de caixa de camelo pequeno.
- Convenção de nomenclatura: o prefixo deve ser um verbo.
- Sugestões de nomenclatura: convenções verbais comuns podem ser usadas
| verbo | significado | valor de retorno |
|---|---|---|
| pode | Determinar se uma ação (permissão) pode ser executada | A função retorna um valor booleano. verdadeiro: executável; falso: não executável |
| tem | Determinar se contém um valor | A função retorna um valor booleano. true: contém este valor; false: não contém este valor |
| é | Determine se é um determinado valor | A função retorna um valor booleano. verdadeiro: um certo valor; falso: não é um certo valor |
| pegar | obter um valor | função retorna um valor não booleano |
| definir | definir um valor | Nenhum valor de retorno, retorna se a configuração foi bem-sucedida ou retorna um objeto encadeado |
| carregar | carregar alguns dados | Nenhum valor de retorno ou retorno se o carregamento estiver completo |
// 是否可阅读
function canRead(): boolean {
return true;
}
// 获取名称
function getName(): string {
return this.name;
}
- Classe & Construtor
Método de nomenclatura: Método de nomenclatura CamelCase, a primeira letra é maiúscula.
Convenção de nomenclatura: o prefixo é o nome.
Exemplo:
class Person {
public name: string;
constructor(name) {
this.name = name;
}
}
const person = new Person('mevyn');
- membros da classe
Os membros da classe incluem:
- Propriedades e métodos públicos: O mesmo que variáveis e funções.
- Propriedades e métodos privados: prefixados com _ (sublinhado), seguidos pelo mesmo método de nomenclatura das propriedades e métodos públicos.
Exemplo:
class Person {
private _name: string;
constructor() { }
// 公共方法
getName() {
return this._name;
}
// 公共方法
setName(name) {
this._name = name;
}
}
const person = new Person();
person.setName('mervyn');
person.getName(); // ->mervyn
4. Especificação do comentário
js suporta três tipos diferentes de comentários: comentários embutidos, comentários de linha única e comentários de várias linhas:
- comentário embutido
- Explicação: Os comentários embutidos começam com duas barras e terminam no final da linha.
- Sintaxe: code // Este é um comentário embutido
- Como usar: Deixe um espaço entre // (barra dupla) e o código e deixe um espaço entre // (barra dupla) e o texto do comentário.
Sugestões de nomes:
// usado para exibir um comentário explicativo
// -> usado para exibir o resultado da expressão,
// > usado para exibir o resultado de saída do console,
Exemplo:
function test() { // 测试函数
console.log('Hello World!'); // >Hello World!
return 3 + 2; // ->5
}
- comentário de linha única
- Explicação: Um comentário de linha única começa com duas barras e termina com o final da linha.
- Sintaxe: // Este é um comentário de uma única linha
- Como usar: Uma única linha: // (barra dupla) e um espaço entre o texto do comentário.
Exemplo:
// 调用了一个函数；1)单独在一行
setTitle();
- comentário multilinha
- Descrição: Comece com /* e termine com */
- Sintaxe: /* descrição do comentário */
- Como usar: Se o início / e o fim / estiverem em uma linha, é recomendável usar um comentário de uma linha. Se houver pelo menos três linhas de comentários, a primeira linha é / , a última linha é /, as outras linhas começam com e um espaço é reservado para o texto do comentário.
Exemplo:
/*
* 代码执行到这里后会调用setTitle()函数
* setTitle()：设置title的值
*/
setTitle();
- Anotação de função (método)
-
Explicação: A anotação de função (método) também é um tipo de anotação multilinha, mas contém requisitos especiais de anotação, consulte JSDoc
-
gramática:
/**
* 函数说明
* @关键字
*/
Palavras-chave de comentários comumente usadas: (apenas uma parte está listada, não todas)
| Nome da nota | gramática | significado | exemplo |
|---|---|---|---|
| @param | @param nome do parâmetro {tipo de parâmetro} informações de descrição | Informações que descrevem parâmetros | @param name {String} nome de entrada |
| @retornar | @return {tipo de retorno} informações de descrição | Informações que descrevem o valor de retorno | @return {Boolean} true: executável; false: não executável |
| @autor | @autor informações do autor [informações auxiliares: como endereço de e-mail, data] | Informações que descrevem o autor desta função | @autor Zhang San 2015/07/21 |
| @versão | @versão XX.XX.XX | Descreve o número da versão desta função | @versão 1.0.3 |
| @exemplo | @example código de exemplo | Uso de funções de demonstração | @example setTitle('teste') |
/**
* 合并Grid的行
* @param grid {Ext.Grid.Panel} 需要合并的Grid
* @param cols {Array} 需要合并列的Index(序号)数组；从0开始计数，序号也包含。
* @param isAllSome {Boolean} ：是否2个tr的cols必须完成一样才能进行合并。true：完成一样；false(默认)：不完全一样
* @return void
* @author polk6 2015/07/21
* @example
* _________________ _________________
* | 年龄 | 姓名 | | 年龄 | 姓名 |
* ----------------- mergeCells(grid,[0]) -----------------
* | 18 | 张三 | => | | 张三 |
* ----------------- - 18 ---------
* | 18 | 王五 | | | 王五 |
* ----------------- -----------------
*/
function mergeCells(grid: Ext.Grid.Panel, cols: Number[], isAllSome: boolean = false) {
// Do Something
}
- Não salve uma referência a isso. Use a função#bind.
// bad
function () {
var self = this;
return function () {
console.log(self);
};
}
// bad
function () {
var that = this;
return function () {
console.log(that);
};
}
// bad
function () {
var _this = this;
return function () {
console.log(_this);
};
}
// good
function () {
return function () {
console.log(this);
}.bind(this);
}
- Dê um nome à função. Isso é útil ao fazer rastreamentos de pilha.
// bad
var log = function (msg) {
console.log(msg);
};
// good
var log = function log(msg) {
console.log(msg);
};
- Se o seu arquivo exportar uma classe, o nome do arquivo deve ser exatamente igual ao nome da classe.
// file contents
class CheckBox {
// ...
}
module.exports = CheckBox;
// in some other file
// bad
var CheckBox = require('./checkBox');
// bad
var CheckBox = require('./check_box');
// good
var CheckBox = require('./CheckBox');
5. Módulo
- Os módulos devem começar com !. Isso garante que, quando um módulo incorreto se esquecer de incluir o ponto e vírgula final, não haverá erros após a fusão do código na produção. Descrição detalhada
- Os arquivos devem ser nomeados em camel case e colocados em uma pasta com o mesmo nome da exportação.
- Adicionado um método chamado noConflict() para definir o módulo exportado para a versão anterior e retorná-lo.
- Sempre declare 'use strict'; no topo do seu módulo.
// fancyInput/fancyInput.js
!function (global) {
'use strict';
var previousFancyInput = global.FancyInput;
function FancyInput(options) {
this.options = options || {};
}
FancyInput.noConflict = function noConflict() {
global.FancyInput = previousFancyInput;
return FancyInput;
};
global.FancyInput = FancyInput;
}(this);
Construtor
- Atribua métodos a protótipos de objeto em vez de substituir o protótipo por um novo objeto. A substituição do protótipo causará problemas com a herança: redefinir o protótipo substituirá o protótipo original!
function Jedi() {
console.log('new jedi');
}
// bad
Jedi.prototype = {
fight: function fight() {
console.log('fighting');
},
block: function block() {
console.log('blocking');
}
};
// good
Jedi.prototype.fight = function fight() {
console.log('fighting');
};
Jedi.prototype.block = function block() {
console.log('blocking');
};
- Os métodos podem retornar isso para implementar o encadeamento de métodos.
// bad
Jedi.prototype.jump = function jump() {
this.jumping = true;
return true;
};
Jedi.prototype.setHeight = function setHeight(height) {
this.height = height;
};
var luke = new Jedi();
luke.jump(); // => true
luke.setHeight(20); // => undefined
// good
Jedi.prototype.jump = function jump() {
this.jumping = true;
return this;
};
Jedi.prototype.setHeight = function setHeight(height) {
this.height = height;
return this;
};
var luke = new Jedi();
luke.jump()
.setHeight(20);