Traducido para Hexlet.io
En programación de computadoras, una convención de nomenclatura es un conjunto de reglas para elegir una secuencia de caracteres que se usará para identificadores que denotan variables, tipos, funciones y otros objetos en el código fuente y la documentación - Wikipedia
¡Encontrar nombres es difícil!
En este artículo, nos centraremos en la técnica de denominación (P) A / HC / LC para mejorar la legibilidad del código. Estas pautas se pueden aplicar a cualquier lenguaje de programación, el artículo utiliza JavaScript para ejemplos de código.
¿Qué significa (P) A / HC / LC?
Esta práctica utiliza el siguiente patrón para nombrar una función:
? (P) + (A) + (HC) + ? (LC)
¿Qué significa el prefijo (P)?
El prefijo amplía el significado de la función.
- is
Describe una propiedad o estado del contexto actual (generalmente un valor booleano).
const color = 'blue';
const isBlue = (color === 'blue'); //
const isPresent = true; //
if (isBlue && isPresent) {
console.log('Blue is present!');
}
- has
Indica si el contexto actual tiene un valor o estado específico (generalmente un valor booleano).
/* */
const isProductsExist = (productsCount > 0);
const areProductsPresent = (productsCount > 0);
/* */
const hasProducts = (productsCount > 0);
- should
Refleja un operador condicional positivo (generalmente un valor booleano) asociado con una acción específica.
const shouldUpdateUrl = (url, expectedUrl) => url !== expectedUrl;
La acción es el corazón de la función
La acción es la parte verbal del nombre de la función. Esta es la parte más importante para describir lo que hace una función.
- 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.
No utilices abreviaturas. Por lo general, solo empeoran la legibilidad del código. Encontrar un nombre breve y descriptivo puede ser difícil, pero las abreviaturas no pueden ser una excusa para no hacerlo. Por ejemplo:
/* */
const onItmClk = () => {};
/* */
const onItemClick = () => {};
3. Evite el contexto duplicado
Siempre elimine el contexto de un nombre a menos que al hacerlo comprometa la legibilidad.
class MenuItem {
/* ( "MenuItem") */
handleMenuItemClick(event) {
...
}
/* MenuItem.handleClick() */
handleClick(event) {
...
}
}
4. Refleja el resultado esperado en el nombre.
/* */
const isEnabled = (itemsCount > 3);
return <Button disabled={!isEnabled} />
/* */
const isDisabled = (itemsCount <= 3);
return <Button disabled={isDisabled} />
5. Considere el singular / plural
Al igual que el prefijo, los nombres de las variables pueden ser singulares o plurales dependiendo de si tienen un significado o más.
/* */
const friends = 'Bob';
const friend = ['Bob', 'Tony', 'Tanya'];
/* */
const friend = 'Bob';
const friends = ['Bob', 'Tony', 'Tanya'];
6. Use nombres significativos y pronunciados
/* */
const yyyymmdstr = moment().format("YYYY/MM/DD");
/* */
const currentDate = moment().format("YYYY/MM/DD");