Symposium

Articles

Convenções de nomenclatura JavaScript

admin

No Comments

Uma introdução de convenções de nomenclatura JavaScript por exemplo — o que lhe dá o bom senso quando se trata de nomear variáveis, funções, classes ou componentes em JavaScript. Ninguém está a fazer cumprir estas regras de convenção de nomenclatura, contudo, são amplamente aceites como padrão na comunidade JS.

Convenções de nomenclatura JavaScript: Variáveis

JavaScript variáveis são sensíveis a maiúsculas e minúsculas. Portanto, as variáveis JavaScript com caracteres minúsculos e maiúsculos são diferentes:

 var name = 'Robin Wieruch'; 
 
 var Name = 'Dennis Wieruch'; 
 
 var NAME = 'Thomas Wieruch'; 
 
 console.log(name); 
 // "Robin Wieruch" 
 
 console.log(Name); 
 // "Dennis Wieruch" 
 
 console.log(NAME); 
 // "Thomas Wieruch" 
Uma variável JavaScript deve ser auto-descritiva. Não deve ser necessário acrescentar um comentário para documentação adicional à variável:
 // bad 
 var value = 'Robin'; 
 
 // bad 
 var val = 'Robin'; 
 
 // good 
 var firstName = 'Robin'; 
p>Variáveis JavaScript declaradas com um nome de variável camelCase com um caractere principal em minúsculas:
 // bad 
 var firstname = 'Robin'; 
 
 // bad 
 var first_name = 'Robin'; 
 
 // bad 
 var FIRSTNAME = 'Robin'; 
 
 // bad 
 var FIRST_NAME = 'Robin'; 
 
 // good 
 var firstName = 'Robin'; 
Excepção para constantes de JavaScript, particulares, e classes/componentes -- que exploraremos mais tarde. Contudo, em geral uma variável JavaScript -- uma string, booleano ou número, mas também um objecto, array ou função -- é declarada com um nome de variável camelCase.
 Uma breve visão geral sobre os diferentes estilos de caixa:

camelCase (usado em JS)
PascalCase (usado em JS)
snake_case
kebab-case

 Convenções de Nomeação JavaScript: Boolean
 Um prefixo como is, are, ou tem ajuda cada desenvolvedor de JavaScript a distinguir uma booleana de outra variável apenas olhando para ela:
 // bad 
 var visible = true; 
 
 // good 
 var isVisible = true; 
 
 // bad 
 var equal = false; 
 
 // good 
 var areEqual = false; 
 
 // bad 
 var encryption = true; 
 
 // good 
 var hasEncryption = true; 
 Em contraste com as cordas e inteiros, pode vê-la como outra regra suave para uma convenção de nomenclatura booleana de JavaScript além de ser escrita em caixa de camelo.
 Convenções de Nomenclatura de JavaScript: Função
As funções JavaScript também são escritas em caixa de camelo. Além disso, é uma melhor prática dizer realmente o que a função está a fazer, dando ao nome da função um verbo como prefixo.
 // bad 
 function name(firstName, lastName) { 
 return `${firstName} ${lastName}`; 
 } 
 
 // good 
 function getName(firstName, lastName) { 
 return `${firstName} ${lastName}`; 
 } 

 Este verbo como prefixo pode ser qualquer coisa (por exemplo, get, fetch, push, apply, calculate, compute, post). É mais uma regra suave a considerar por ter mais variáveis JavaScript auto-descritivas.
 Convenções de Nomeação JavaScript: Classe
Uma classe JavaScript é declarada com um PascalCase em contraste com outras estruturas de dados JavaScript:
 class SoftwareDeveloper { 
 constructor(firstName, lastName) { 
 this.firstName = firstName; 
 this.lastName = lastName; 
 } 
 } 
 
 var me = new SoftwareDeveloper('Robin', 'Wieruch'); 
p> Sempre que um construtor JavaScript é chamado a instanciar uma nova instância de uma classe, o nome da classe deve aparecer em Caso Pascal, porque a classe foi declarada com Caso Pascal em primeiro lugar.
 Convenções de Nomenclatura JavaScript: Componente
Componentes não estão em todo o lado em JavaScript, mas normalmente encontrados em estruturas front-end como React. Uma vez que um componente é meio instanciado — mas anexado ao DOM em vez disso — como uma classe JavaScript, também são amplamente declarados com Pascal Case.
 // bad 
 function userProfile(user) { 
 return ( 
 <div> 
 <span>First Name: {user.firstName}</span> 
 <span>Last Name: {user.lastName}</span> 
 </div> 
 ); 
 } 
 
 // good 
 function UserProfile(user) { 
 return ( 
 <div> 
 <span>First Name: {user.firstName}</span> 
 <span>Last Name: {user.lastName}</span> 
 </div> 
 ); 
 } 
 Quando um componente é usado, distingue-se dos componentes nativos HTML e web, porque a sua primeira letra é sempre escrita em maiúsculas.
 <div> 
 <UserProfile 
 user={{ firstName: 'Robin', lastName: 'Wieruch' }} 
 /> 
 </div> 
 Convenções de Nomeação JavaScript: Methods
Identical to JavaScript functions, a method on a JavaScript class is declared with camelCase:
 class SoftwareDeveloper { 
 constructor(firstName, lastName) { 
 this.firstName = firstName; 
 this.lastName = lastName; 
 } 
 
 getName() { 
 return `${this.firstName} ${this.lastName}`; 
 } 
 } 
 
 var me = new SoftwareDeveloper('Robin', 'Wieruch'); 
 
 console.log(me.getName()); 
 // "Robin Wieruch" 
Herão aplicáveis as mesmas regras que para as funções JavaScript -- por exemplo, adicionar um verbo como prefixo --, para tornar o nome do método mais auto-descritivo.
 JavaScript Naming Conventions: Privado
Raramente encontrará um sublinhado (_) em frente de uma variável/função/método em JavaScript. Se vir uma, esta destina-se a ser privada. Mesmo que não possa ser realmente aplicado pelo JavaScript, declarar algo como privado diz-nos como deve ser usado ou como não deve ser usado.
 Por exemplo, um método privado numa classe só deve ser usado internamente pela classe, mas deve ser evitado para ser usado na instância da classe:
 class SoftwareDeveloper { 
 constructor(firstName, lastName) { 
 this.firstName = firstName; 
 this.lastName = lastName; 
 this.name = _getName(firstName, lastName); 
 } 
 
 _getName(firstName, lastName) { 
 return `${firstName} ${lastName}`; 
 } 
 } 
 
 var me = new SoftwareDeveloper('Robin', 'Wieruch'); 
 
 // good 
 var name = me.name; 
 console.log(name); 
 // "Robin Wieruch" 
 
 // bad 
 name = me._getName(me.firstName, me.lastName); 
 console.log(name); 
 // "Robin Wieruch" 
 Uma variável/função privada também pode ocorrer num ficheiro JavaScript. Isto pode significar que a variável/função não deve ser utilizada fora deste ficheiro, mas apenas internamente para calcular mais lógica de negócio para outras funções dentro do mesmo ficheiro..
 Convenções de Nomeação JavaScript: Constant
P>Último mas não menos importante, existem constantes -- destinadas a ser variáveis sem alterações -- em JavaScript que são escritas em maiúsculas (UPPERCASE):
 var SECONDS = 60; 
 var MINUTES = 60; 
 var HOURS = 24; 
 
 var DAY = SECONDS * MINUTES * HOURS; 
 Se uma variável tiver mais de uma palavra no seu nome de declaração de variável, faz uso de um sublinhado (_):
 var DAYS_UNTIL_TOMORROW = 1; 
Usually JavaScript constants are defined at the top of a JavaScript file. Como foi sugerido anteriormente, ninguém obriga ninguém a não alterar a variável aqui, excepto uma declaração constante da variável para estruturas de dados primitivas, mas o seu nome em maiúsculas sugere evitá-lo.
 Convenções de Nomeação JavaScript: Variável Global
 Uma variável JavaScript é definida globalmente, se todo o seu contexto tiver acesso a ela. Muitas vezes o contexto é definido pelo ficheiro JavaScript onde a variável é declarada/definida, mas em projectos JavaScript mais pequenos pode ser o projecto inteiro. Não existem convenções especiais de nomenclatura para variáveis JavaScript globais.

 Uma variável JavaScript global é declarada no topo de um projecto/ficheiro.
 Uma variável JavaScript global é escrita em camelCase se for mutável.
 Uma variável JavaScript global é escrita em UPPERCASE se for imutável.

 Convenções de nomenclatura JavaScript: Underscore
 Então e o underscore e dash em nomes de variáveis JavaScript? Uma vez que o camelCase e o PascalCase são considerados principalmente no JS, constatou-se que o underscore só raramente é utilizado para variáveis privadas ou constantes. Ocasionalmente encontrará sublinhados ao obter informações de terceiros como bases de dados ou APIs. Outro cenário onde poderá ver um sublinhado são parâmetros de funções não utilizadas, mas não se preocupe ainda com estes se não os tiver visto por aí 😉
 Convenções de Nomeação JavaScript: Dash
 Um traço numa variável JavaScript não é também senso comum. Apenas torna as coisas mais difíceis; como usá-las num objecto:
 // bad 
 var person = { 
 'first-name': 'Robin', 
 'last-name': 'Wieruch', 
 }; 
 
 var firstName = person; 
 
 // good 
 var person = { 
 firstName: 'Robin', 
 lastName: 'Wieruch', 
 }; 
 
 var firstName = person.firstName; 
 Nem sequer é possível usar um traço directamente para uma declaração de variável:
 var first-name = 'Robin'; 
 // Uncaught SyntaxError: Unexpected token '-' 
 É por isso que é melhor evitá-las.
 Convenções de Nomes em JavaScript: Ficheiros
Existem duas estratégias de atribuição de nomes a ficheiros em JavaScript: PascalCase e kebab-case. Nas aplicações frontend em JavaScript, verá frequentemente PascalCase para nomear componentes (por exemplo, componentes de Reacção).
 - components/ 
 --- user/ 
 ----- UserProfile.js 
 ----- UserList.js 
 ----- UserItem.js 
 --- ui/ 
 ----- Dialog.js 
 ----- Dropdown.js 
 ----- Table.js 
 Em contraste, na aplicação backend JavaScript, kebab-case é o senso comum:
 - routing/ 
 --- user-route.js 
 --- messages-route.js 
 Também verá nomes de camelCase, mas semelhante ao PascalCase (desculpe aplicações front-end), existe o risco de os sistemas operativos estarem a tratá-los de forma diferente, o que pode levar a bugs. É por isso que aderir ao kebab-case deve ser a norma para nomes de ficheiros em JavaScript.
 Se quiser saber mais sobre o estilo de código e formatação JavaScript, que não é discutido aqui por causa das convenções de nomenclatura, deve definitivamente verificar ESLint e Prettier para JavaScript.

Share :

Deixe uma resposta Cancelar resposta