Maison > interface Web > js tutoriel > Normes générales de codage JavaScript.

Normes générales de codage JavaScript.

王林
Libérer: 2024-08-06 18:33:40
original
1226 Les gens l'ont consulté

General Coding Standards 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) { ... }
Copier après la connexion
  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 { ... }
Copier après la connexion
  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;
Copier après la connexion
  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);
     }
   }
Copier après la connexion
  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;
   }
Copier après la connexion
  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();
   }
Copier après la connexion

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';
Copier après la connexion
  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';
Copier après la connexion

Meilleures pratiques

  1. Utiliser le mode strict :
    • Activez toujours le mode strict pour détecter les erreurs de codage courantes.
   'use strict';
Copier après la connexion
  1. Utiliser des constantes :
    • Utilisez des constantes pour les valeurs qui ne changent pas.
   const MAX_USERS = 100;
Copier après la connexion
  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';
Copier après la connexion
  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) { ... }
Copier après la connexion
  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));
   }
Copier après la connexion
  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;
Copier après la connexion

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!

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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal