Normes générales de codage JavaScript.

Normes générales de codage

1. Noms significatifs :
   • Utilisez des noms de variables et de fonctions significatifs et descriptifs.
   • Évitez les abréviations et les noms à une seule lettre, à l'exception des compteurs de boucles.

   // Good
   const userAge = 25;
   function calculateTotalPrice(items) { ... }

   // Bad
   const a = 25;
   function calc(items) { ... }

1. Conventions de dénomination cohérentes :
   • Utilisez camelCase pour les variables et les fonctions.
   • Utilisez PascalCase pour les noms de classe.

   const userAge = 25;
   function calculateTotalPrice(items) { ... }
   class UserProfile { ... }

1. Évitez les répétitions :
   • Suivez le principe DRY (Don't Repeat Yourself) en encapsulant le code répété dans des fonctions.

   // Good
   function calculateDiscount(price, discount) { ... }
   const price1 = calculateDiscount(100, 10);
   const price2 = calculateDiscount(200, 20);

   // Bad
   const price1 = 100 - 10;
   const price2 = 200 - 20;

1. Gestion des erreurs :
   • Enveloppez les appels d'API et autres opérations asynchrones dans des blocs try-catch.

   async function fetchData() {
     try {
       const response = await fetch('api/url');
       const data = await response.json();
       return data;
     } catch (error) {
       console.error('Error fetching data:', error);
     }
   }

1. Cas Edge :
   • Toujours considérer les cas extrêmes et valider les entrées.

   function getUserAge(user) {
     if (!user || !user.age) {
       return 'Age not available';
     }
     return user.age;
   }

1. Formatage cohérent :
   • Suivez un style de formatage de code cohérent (indentation, espacement, etc.). Utilisez des outils comme Prettier pour automatiser cela.

   if (condition) {
     doSomething();
   } else {
     doSomethingElse();
   }

Organisation du code

1. Modularisation :
   • Décomposez le code en petits modules ou fonctions réutilisables.

   // utils.js
   export function calculateDiscount(price, discount) { ... }

   // main.js
   import { calculateDiscount } from './utils.js';

1. Séparation des préoccupations :
   • Séparez les différentes préoccupations (par exemple, la logique de l'interface utilisateur, la logique métier, la gestion des données) en différents fichiers ou fonctions.

   // ui.js
   function updateUI(data) { ... }

   // data.js
   async function fetchData() { ... }

   // main.js
   import { updateUI } from './ui.js';
   import { fetchData } from './data.js';

Meilleures pratiques

1. Utiliser le mode strict :
   • Activez toujours le mode strict pour détecter les erreurs de codage courantes.

   'use strict';

1. Utiliser des constantes :
   • Utilisez des constantes pour les valeurs qui ne changent pas.

   const MAX_USERS = 100;

1. Évitez les variables globales :
   • Minimisez l'utilisation de variables globales pour éviter les conflits et les comportements involontaires.

   // Good
   (function() {
     const localVariable = 'This is local';
   })();

   // Bad
   var globalVariable = 'This is global';

1. Commentaires et documentation :
   • Rédigez des commentaires et de la documentation pour expliquer le but et la fonctionnalité du code.

   /**
    * Calculates the total price after applying a discount.
    * @param {number} price - The original price.
    * @param {number} discount - The discount to apply.
    * @returns {number} - The total price after discount.
    */
   function calculateTotalPrice(price, discount) { ... }

1. Utiliser Promises et Async/Await avec gestion des erreurs :
   • Préférez utiliser promises et async/await pour les opérations asynchrones, et enveloppez-les dans des blocs try-catch pour la gestion des erreurs.

   // Good
   async function fetchData() {
     try {
       const response = await fetch('api/url');
       const data = await response.json();
       return data;
     } catch (error) {
       console.error('Error fetching data:', error);
     }
   }

   // Bad
   function fetchData(callback) {
     fetch('api/url')
       .then(response => response.json())
       .then(data => callback(data))
       .catch(error => console.error('Error fetching data:', error));
   }

1. Déstructuration d'objets :
   • Utilisez la déstructuration d'objets pour extraire plusieurs propriétés d'un objet de manière concise.

   // Good
   const vehicle = { make: 'Toyota', model: 'Camry' };
   const { make, model } = vehicle;

   // Bad
   const vehicleMake = vehicle.make;
   const vehicleModel = vehicle.model;

En suivant ces normes, vous pouvez vous assurer que votre code JavaScript est propre, maintenable et efficace.

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!