Maison > interface Web > js tutoriel > le corps du texte

Comment rédiger des commentaires de code clairs et efficaces en JavaScript avec de meilleurs commentaires

Mary-Kate Olsen
Libérer: 2024-10-31 15:48:31
original
679 Les gens l'ont consulté

How to Write Clear and Effective Code Comments in JavaScript with Better Comments

Lorsque vous travaillez en JavaScript, la rédaction de commentaires clairs et structurés est essentielle pour un code maintenable. L'extension Better Comments pour Visual Studio Code va plus loin en codant par couleur différents types de commentaires pour augmenter la lisibilité. Vous pouvez le télécharger ici. Explorons comment l'utiliser pour les meilleures pratiques de commentaires.

Types de commentaires avec de meilleurs commentaires

Better Comments classe les commentaires par objectif, y compris les types suivants :

  1. TODOs (// TODO :) : Marquer les tâches ou les améliorations.
  2. Remarques importantes (// !) : Mettez en surbrillance les zones clés de votre code.
  3. Questions (// ?) : à utiliser pour clarifier la logique ou demander des commentaires.
  4. Explications (//) : Commentaires standards pour expliquer du code complexe.

1. Expliquez le « Pourquoi » et non le « Quoi »

Au lieu de reformuler ce que fait le code, concentrez-vous sur la raison pour laquelle un code spécifique est nécessaire. Meilleurs commentaires nous permet d'utiliser // ? pour marquer des questions ou des explications qui clarifient le raisonnement.

Exemple :

javascript
Copy code
// ? Increment by 2 to loop through only odd numbers
for (let i = 1; i < 10; i += 2) {
  console.log(i);
}

Copier après la connexion
Copier après la connexion

2. Utilisez des commentaires descriptifs pour une logique complexe

Pour une logique complexe, le //! la notation peut indiquer des sections importantes dans Meilleurs commentaires. Cela aide les futurs responsables à reconnaître rapidement les explications essentielles.

Exemple :

javascript
Copy code
//! Custom sort function to prioritize items with the highest scores, then alphabetically by name
items.sort((a, b) => {
  if (a.score === b.score) return a.name.localeCompare(b.name);
  return b.score - a.score;
});

Copier après la connexion
Copier après la connexion

3. Fonctions et classes de commentaires

Fournissez l'objectif, les entrées et les sorties au début des fonctions et des classes. Utilisez Meilleurs commentaires pour plus de clarté : // ? pour les commentaires explicatifs et // TODO pour les améliorations en attente.

Exemple :

javascript
Copy code
// ? Calculates the total price of items in the cart
// TODO: Add handling for discount codes in future iterations
/**
 * Calculates the total price of items in the cart.
 * @param {Array} items - Array of item objects with price and quantity.
 * @returns {number} - The total price.
 */
function calculateTotal(items) {
  return items.reduce((total, item) => total + item.price * item.quantity, 0);
}

Copier après la connexion

4. Évitez les commentaires redondants

Évitez de mentionner des informations évidentes dans les commentaires. Si le nom de la fonction generateID() est clair, vous pouvez ignorer entièrement le commentaire ou utiliser un simple // ? commentez pour noter des choix de conception spécifiques.

Exemple (à éviter) :

javascript
Copy code
// ? Generates a unique identifier string
function generateID() {
  return Math.random().toString(36).substr(2, 9);
}

Copier après la connexion

5. Utilisez un style et une structure cohérents

Suivre un style de commentaire cohérent, en particulier avec les couleurs Meilleurs commentaires, aide les membres de l'équipe à comprendre rapidement les commentaires et à repérer les notes importantes.

6. Gardez les commentaires à jour

Les commentaires obsolètes induisent les lecteurs en erreur. Avec Meilleurs commentaires, vous pouvez utiliser // TODO pour les rappels ou //! pour mettre en évidence les changements.

7. Documenter les problèmes connus ou les solutions de contournement

Si le code comporte des solutions de contournement ou des limitations connues, documentez-les avec de Meilleurs commentaires. Le // ! Le style peut être utilisé pour les problèmes critiques, attirant l'attention sur tout bug connu ou correctif nécessaire.

Exemple :

javascript
Copy code
// ? Increment by 2 to loop through only odd numbers
for (let i = 1; i < 10; i += 2) {
  console.log(i);
}

Copier après la connexion
Copier après la connexion

8. Commentaires sur les cas extrêmes

Utilisez // ? dans Meilleurs commentaires pour mettre en évidence les cas extrêmes, aidant ainsi les futurs lecteurs à comprendre pourquoi certaines manipulations existent.

Exemple :

javascript
Copy code
//! Custom sort function to prioritize items with the highest scores, then alphabetically by name
items.sort((a, b) => {
  if (a.score === b.score) return a.name.localeCompare(b.name);
  return b.score - a.score;
});

Copier après la connexion
Copier après la connexion

Conclusion

Avec l'extension Better Comments, vous pouvez rendre vos commentaires JavaScript plus efficaces en utilisant des balises à code couleur pour clarifier les intentions, marquer les tâches, mettre en évidence les sections importantes et gérer les cas extrêmes. Cette approche garantit que votre code est facile à comprendre, à maintenir et à étendre.

Bon codage et bons commentaires avec Better Comments !

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!

source:dev.to
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
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!