Maison interface Web js tutoriel Comprendre le code propre : noms significatifs ⚡

Comprendre le code propre : noms significatifs ⚡

Aug 12, 2024 pm 08:30 PM

Understanding Clean Code: Meaningful Names ⚡

Lors de l'écriture de code, l'un des aspects les plus négligés et pourtant critiques est la dénomination.

Les noms que nous choisissons pour les variables, fonctions, classes et autres entités dans notre code peuvent avoir un impact significatif sur la lisibilité, la maintenabilité et la qualité globale.

Le chapitre 2 de Clean Code explore l'art et la science du choix de noms significatifs, en fournissant un ensemble de lignes directrices qui peuvent aider les développeurs à écrire du code à la fois expressif et compréhensible.

Dans cet article de blog, nous explorerons les principaux points à retenir de ce chapitre, en illustrant chaque concept avec des exemples en JavaScript.


?1. Utilisez des noms révélateurs d’intention

Les noms que vous choisissez doivent clairement exprimer l'intention derrière la variable, la fonction ou la classe. Le lecteur doit être capable de comprendre ce que fait le code sans avoir besoin de contexte supplémentaire.

// Bad
let d; 

// Good
let daysUntilDeadline;
Copier après la connexion

Dans le premier exemple, d est vague et ne fournit aucun contexte. La version améliorée, daysUntilDeadline, indique clairement ce que représente la variable.


?2. Évitez la désinformation

Les noms ne doivent pas être trompeurs. Évitez d'utiliser des noms qui pourraient impliquer une signification différente de celle que fait réellement le code.

// Bad
let accountList = new Map();

// Good
let accountsMap = new Map();
Copier après la connexion

Ici, accountList pourrait être trompeur car il suggère une liste (qui est une collection ordonnée), alors que la structure de données réelle est une carte. L'utilisation de AccountsMap est plus précise.


?3. Faites des distinctions significatives

Si vous devez faire la différence entre des variables, des fonctions ou des classes similaires, faites-le d'une manière qui rend la distinction claire et significative.

// Bad
getUserInfo();
getUserData();

// Good
getUserProfile();
getUserSettings();
Copier après la connexion

Dans le premier exemple, getUserInfo et getUserData sont trop similaires et ne traduisent pas clairement leurs différences. Le deuxième exemple clarifie la distinction en nommant les fonctions en fonction de ce qu'elles renvoient.


?4. Utilisez des noms prononçables

Les noms doivent être faciles à lire et à prononcer. Cela facilite la discussion du code avec les autres.

// Bad
let genymdhms;

// Good
let generationTimestamp;
Copier après la connexion

genymdhms est un nom non prononçable qui serait difficile à retenir ou à discuter. GenerationTimestamp, cependant, est clair et facile à dire.


?5. Utiliser des noms consultables

Dans les bases de code plus volumineuses, il est important d’utiliser des noms faciles à rechercher. Évitez d'utiliser des noms à une seule lettre ou des noms trop abrégés.

// Bad
let e = document.getElementById('email');

// Good
let emailInputElement = document.getElementById('email');
Copier après la connexion

e n’est pas facilement consultable et il ne transmet pas ce qu’il représente. emailInputElement est plus descriptif et plus facile à localiser dans la base de code.


?6. Évitez les encodages

Évitez d'inclure des types, des préfixes ou d'autres codages dans vos noms. Que le nom lui-même soit suffisamment descriptif.

// Bad
let phoneString;

// Good
let phoneNumber;
Copier après la connexion

Dans ce cas, phoneString inclut un encodage de type inutile (String). phoneNumber est plus simple et plus direct.


?7. Les noms de classe doivent être des noms, les noms de fonctions doivent être des verbes

Les classes représentent des objets ou des concepts, leurs noms doivent donc être des noms. Les fonctions, quant à elles, représentent des actions, leurs noms doivent donc être des verbes.

// Class names (Nouns)
class UserAccount {}
class ShoppingCart {}

// Function names (Verbs)
function calculateTotal() {}
function sendEmail() {}
Copier après la connexion

Cette distinction aide à comprendre le rôle de chaque élément dans votre code.


?8. Évitez la cartographie mentale

Ne forcez pas le lecteur à traduire un nom en quelque chose de plus significatif. Le nom doit être explicite.

// Bad
let n = 5; // Number of users

// Good
let userCount = 5;
Copier après la connexion

n oblige le lecteur à se souvenir ou à déduire qu'il représente le nombre d'utilisateurs, alors que userCount est immédiatement clair.


Conclusion ⚡

Choisir des noms significatifs est plus qu'une simple question de style : c'est une pratique fondamentale pour écrire du code propre et maintenable.

En suivant les directives décrites dans le chapitre 2 de Clean Code, vous pouvez améliorer la lisibilité de votre code JavaScript et le rendre plus facile à comprendre et à maintenir pour les autres (et vous-même).

N'oubliez pas que l'objectif est d'écrire du code qui communique son objectif et sa logique, réduisant ainsi la charge cognitive du lecteur.

La prochaine fois que vous nommerez une variable, une fonction ou une classe, réfléchissez aux principes d'une dénomination significative et à la manière dont ils peuvent contribuer à un code plus propre et plus efficace.

Bon codage !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article chaud

Repo: Comment relancer ses coéquipiers
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines By DDD
Hello Kitty Island Adventure: Comment obtenir des graines géantes
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
1 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Article chaud

Repo: Comment relancer ses coéquipiers
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines By DDD
Hello Kitty Island Adventure: Comment obtenir des graines géantes
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
1 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Tags d'article chaud

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Remplacer les caractères de chaîne en javascript Remplacer les caractères de chaîne en javascript Mar 11, 2025 am 12:07 AM

Remplacer les caractères de chaîne en javascript

Tutoriel de configuration de l'API de recherche Google personnalisé Tutoriel de configuration de l'API de recherche Google personnalisé Mar 04, 2025 am 01:06 AM

Tutoriel de configuration de l'API de recherche Google personnalisé

Exemple Couleurs Fichier JSON Exemple Couleurs Fichier JSON Mar 03, 2025 am 12:35 AM

Exemple Couleurs Fichier JSON

8 Superbes plugins de mise en page JQuery Page 8 Superbes plugins de mise en page JQuery Page Mar 06, 2025 am 12:48 AM

8 Superbes plugins de mise en page JQuery Page

10 Highlighters de syntaxe jQuery 10 Highlighters de syntaxe jQuery Mar 02, 2025 am 12:32 AM

10 Highlighters de syntaxe jQuery

Créez vos propres applications Web Ajax Créez vos propres applications Web Ajax Mar 09, 2025 am 12:11 AM

Créez vos propres applications Web Ajax

Qu'est-ce que & # x27; ceci & # x27; en javascript? Qu'est-ce que & # x27; ceci & # x27; en javascript? Mar 04, 2025 am 01:15 AM

Qu'est-ce que & # x27; ceci & # x27; en javascript?

10 tutoriels JavaScript & jQuery MVC 10 tutoriels JavaScript & jQuery MVC Mar 02, 2025 am 01:16 AM

10 tutoriels JavaScript & jQuery MVC

See all articles