Traduzido para Hexlet.io
Na programação de computadores, uma convenção de nomenclatura é um conjunto de regras para escolher uma sequência de caracteres a ser usada para identificadores que denotam variáveis, tipos, funções e outros objetos no código-fonte e na documentação - Wikipedia
É difícil pensar em nomes!
Neste artigo, vamos nos concentrar na técnica de nomenclatura (P) A / HC / LC para melhorar a legibilidade do código. Essas diretrizes podem ser aplicadas a qualquer linguagem de programação, o artigo usa JavaScript para exemplos de código.
O que significa (P) A / HC / LC?
Esta prática usa o seguinte padrão para nomear uma função:
? (P) + (A) + (HC) + ? (LC)
O que significa o prefixo (P)?
O prefixo expande o significado da função.
- is
Descreve uma propriedade ou estado do contexto atual (geralmente um valor booleano).
const color = 'blue';
const isBlue = (color === 'blue'); //
const isPresent = true; //
if (isBlue && isPresent) {
console.log('Blue is present!');
}
- has
Indica se o contexto atual tem um valor ou estado específico (geralmente um valor booleano).
/* */
const isProductsExist = (productsCount > 0);
const areProductsPresent = (productsCount > 0);
/* */
const hasProducts = (productsCount > 0);
- should
Reflete um operador condicional positivo (geralmente um valor booleano) associado a uma ação específica.
const shouldUpdateUrl = (url, expectedUrl) => url !== expectedUrl;
Ação é o coração da função
Ação é a parte do verbo do nome da função. Esta é a parte mais importante na descrição do que uma função faz.
- get
( getter ).
function getFruitsCount() {
return this.fruits.length;
}
- set
A B.
let fruits = 0;
const setFruits = (nextFruits) => {
fruits = nextFruits;
};
setFruits(5);
console.log(fruits); // 5
- reset
.
const initialFruits = 5;
let fruits = initialFruits;
setFruits(10);
console.log(fruits); // 10
const resetFruits = () => {
fruits = initialFruits;
};
resetFruits();
console.log(fruits); // 5
- fetch
, (, ).
const fetchPosts = (postCount) => fetch('https://api.dev/posts', {...});
- remove
- -.
, , — removeFilter
, deleteFilter
( ):
const removeFilter = (filterName, filters) => filters.filter((name) => name !== filterName);
const selectedFilters = ['price', 'availability', 'size'];
removeFilter('price', selectedFilters);
- delete
-. .
, , , . delete-post, CMS deletePost
, removePost
.
const deletePost = (id) => database.find({ id }).delete();
- compose
. , .
const composePageUrl = (pageName, pageId) => `${pageName.toLowerCase()}-${pageId}`;
- handle
. .
const handleLinkClick = () => {
console.log('Clicked a link!');
};
link.addEventListener('click', handleLinkClick);
— , .
— -. , , , .
/* , */
const filter = (list, predicate) => list.filter(predicate);
/* , */
const getRecentPosts = (posts) => filter(posts, (post) => post.date === Date.now());
/*
.
, JavaScript (Array).
filterArray .
*/
, .
1. S-I-D
(Short), (Intuitive) (Descriptive).
/* */
const a = 5; // "a"
const isPaginatable = (postsCount > 10); // "Paginatable"
const shouldPaginatize = (postsCount > 10); // - !
/* */
const postsCount = 5;
const hasPagination = (postsCount > 10);
const shouldDisplayPagination = (postsCount > 10); //
2.
Não use abreviações. Normalmente, eles apenas pioram a legibilidade do código. Encontrar um nome curto e descritivo pode ser difícil, mas as abreviações não podem ser uma desculpa para não o fazer. Por exemplo:
/* */
const onItmClk = () => {};
/* */
const onItemClick = () => {};
3. Evite contexto duplicado
Sempre remova o contexto de um nome, a menos que isso comprometa a legibilidade.
class MenuItem {
/* ( "MenuItem") */
handleMenuItemClick(event) {
...
}
/* MenuItem.handleClick() */
handleClick(event) {
...
}
}
4. Reflita o resultado esperado no nome
/* */
const isEnabled = (itemsCount > 3);
return <Button disabled={!isEnabled} />
/* */
const isDisabled = (itemsCount <= 3);
return <Button disabled={isDisabled} />
5. Considere o singular / plural
Como o prefixo, os nomes das variáveis podem ser no singular ou no plural, dependendo de terem um ou mais significados.
/* */
const friends = 'Bob';
const friend = ['Bob', 'Tony', 'Tanya'];
/* */
const friend = 'Bob';
const friends = ['Bob', 'Tony', 'Tanya'];
6. Use nomes significativos e pronunciados
/* */
const yyyymmdstr = moment().format("YYYY/MM/DD");
/* */
const currentDate = moment().format("YYYY/MM/DD");