Traduit pour Hexlet.io
En programmation informatique, une convention de dénomination est un ensemble de règles permettant de choisir une séquence de caractères à utiliser pour les identificateurs qui désignent des variables, des types, des fonctions et d'autres objets dans le code source et la documentation - Wikipédia
Trouver des noms est difficile!
Dans cet article, nous nous concentrerons sur la technique de nommage (P) A / HC / LC afin d'améliorer la lisibilité du code. Ces instructions peuvent être appliquées à n'importe quel langage de programmation, l'article utilise JavaScript pour des exemples de code.
Que signifie (P) A / HC / LC?
Cette pratique utilise le modèle suivant pour nommer une fonction:
? (P) + (A) + (HC) + ? (LC)
Que signifie le préfixe (P)?
Le préfixe élargit la signification de la fonction.
- is
Décrit une propriété ou un état du contexte actuel (généralement une valeur booléenne).
const color = 'blue';
const isBlue = (color === 'blue'); //
const isPresent = true; //
if (isBlue && isPresent) {
console.log('Blue is present!');
}
- has
Indique si le contexte actuel a une valeur ou un état spécifique (généralement une valeur booléenne).
/* */
const isProductsExist = (productsCount > 0);
const areProductsPresent = (productsCount > 0);
/* */
const hasProducts = (productsCount > 0);
- should
Reflète un opérateur conditionnel positif (généralement une valeur booléenne) associé à une action spécifique.
const shouldUpdateUrl = (url, expectedUrl) => url !== expectedUrl;
L'action est au cœur de la fonction
Action est la partie verbale du nom de la fonction. C'est la partie la plus importante pour décrire ce que fait une fonction.
- 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'utilisez pas d'abréviations. Habituellement, ils ne font qu'aggraver la lisibilité du code. Trouver un nom court et descriptif peut être difficile, mais les abréviations ne peuvent pas être une excuse pour ne pas le faire. Par example:
/* */
const onItmClk = () => {};
/* */
const onItemClick = () => {};
3. Évitez le contexte en double
Supprimez toujours le contexte d'un nom à moins que cela ne compromette la lisibilité.
class MenuItem {
/* ( "MenuItem") */
handleMenuItemClick(event) {
...
}
/* MenuItem.handleClick() */
handleClick(event) {
...
}
}
4. Refléter le résultat attendu dans le nom
/* */
const isEnabled = (itemsCount > 3);
return <Button disabled={!isEnabled} />
/* */
const isDisabled = (itemsCount <= 3);
return <Button disabled={isDisabled} />
5. Considérez le singulier / pluriel
Comme le préfixe, les noms de variables peuvent être au singulier ou au pluriel selon qu'ils ont une ou plusieurs significations.
/* */
const friends = 'Bob';
const friend = ['Bob', 'Tony', 'Tanya'];
/* */
const friend = 'Bob';
const friends = ['Bob', 'Tony', 'Tanya'];
6. Utilisez des noms significatifs et prononcés
/* */
const yyyymmdstr = moment().format("YYYY/MM/DD");
/* */
const currentDate = moment().format("YYYY/MM/DD");