Techniques de refactorisation JavaScript: spécifique au code générique

Prise des clés:

La refactorisation JavaScript améliore la lisibilité du code, la maintenabilité, les performances et la réutilisabilité, aidant la détection et la correction de bogues. Les techniques courantes consistent à minimiser la redondance à l'aide de variables, à améliorer la gestion des événements et à affiner la gestion des classes pour un code plus flexible et adaptable. Des tests unitaires approfondis avant et après le refactorisation sont cruciaux pour éviter les conséquences imprévues. Bien que les gains de performances soient possibles, la priorisation de la lisibilité et de la maintenabilité est primordiale. Le refactorisation devrait être un processus itératif intégré au cycle de vie du développement.

Cet article a été évalué par des pairs par Dan Prince. Merci aux pairs examinateurs de SitePoint pour leurs contributions!

Un thread de forum SitePoint a présenté le code de contrôle de la visibilité déroulante. Bien que fonctionnel, le code manquait de robustesse et d'adaptabilité. Cet article démontre des techniques de refactorisation pour améliorer la réutilisabilité et la résistance future.

CSS original:

<code class="language-css">#second { display: none; }
#second.show { display: block; }</code>

javascript original:

<code class="language-javascript">document.getElementById("location").onchange = function () {
  if (this[this.selectedIndex].value === "loc5") {
    document.getElementById("second").className = "show";
  } else {
    document.getElementById("second").className = "";
  }
};</code>

Cet article refacitait ce code JavaScript pour une meilleure maintenabilité et réutilisabilité.

Choisir le bon chemin de refactorisation:

JavaScript propose plusieurs solutions; L'objectif est d'améliorer le code pour éviter les retouches futures. La suppression de la redondance est un point de départ, progressant vers un code plus générique et adaptable. Le code spécifique est souvent fragile, tandis que le code générique gère une gamme plus large de situations. L'équilibre réside dans la réalisation de la généralité sans sacrifier la lisibilité.

Refactorisation: spécifique au générique:

Le développement basé sur les tests (TDD) met en évidence un principe crucial: à mesure que les tests deviennent plus spécifiques, le code devient plus générique. Cela améliore la capacité du code à gérer divers scénarios. Pour l'exemple de code, les améliorations incluent:

• en utilisant des variables pour stocker les chaînes, centraliser la gestion.
• Remplacement onchange par addEventListener pour une meilleure gestion des événements et empêcher l'écrasement.
• Utilisation classList au lieu de className pour gérer les noms de classe sans écraser les classes existantes.

Ces changements améliorent la résilience aux modifications futures et simplifient les mises à jour.

en utilisant des variables pour empêcher la duplication:

Stockage des ID d'élément et des valeurs de déclenchement dans les variables améliore la maintenabilité. Au lieu de plusieurs références au même élément, une seule référence de variable est utilisée, simplifiant les modifications futures.

Code amélioré (avec utilisation variable):

<code class="language-javascript">var source = document.getElementById("location");
var target = document.getElementById("second");
var triggerValue = "loc5";

source.onchange = function () {
  var selectedValue = this[this.selectedIndex].value;
  if (selectedValue === triggerValue) {
    target.className = "show";
  } else {
    target.className = "";
  }
};</code>

Ce refactoring centralise la gestion de l'identifiant.

Amélioration de la gestion des événements:

Les gestionnaires d'événements traditionnels peuvent être écrasés. addEventListener permet plusieurs gestionnaires pour le même événement, empêchant l'écrasement accidentel.

Code amélioré (avec AddeveventListener):

<code class="language-css">#second { display: none; }
#second.show { display: block; }</code>

Cela garantit la persistance du gestionnaire d'événements.

Amélioration de la gestion des classes:

en utilisant classList.add() et classList.remove() empêche l'écrasement des classes existantes, en maintenant le style d'origine de l'élément.

Code final refactorisé:

<code class="language-javascript">document.getElementById("location").onchange = function () {
  if (this[this.selectedIndex].value === "loc5") {
    document.getElementById("second").className = "show";
  } else {
    document.getElementById("second").className = "";
  }
};</code>

Ce code est plus robuste et adaptable.

Conclusion:

Le refactorisation est un processus simple. Le principe «spécifique à générique», souvent un sous-produit du TDD, améliore la flexibilité du code. Ces techniques réduisent le besoin de correctifs de code répétés, ce qui entraîne un JavaScript plus maintenable et réutilisable.

Questions fréquemment posées (FAQ) sur les techniques de refactorisation JavaScript: (Cette section reste largement inchangée de l'entrée, car elle fournit des informations précieuses et n'a pas besoin de réécriture significative dans le but de paraphraser.)

Quels sont les principaux avantages de la refactorisation du code JavaScript?

Refactoring JavaScript Code offre de nombreux avantages: amélioration de la lisibilité et de la maintenabilité, des performances améliorées grâce à l'optimisation du code, une détection et une correction de bogues plus faciles, et une réutilisation accrue du code.

Comment puis-je identifier le code qui doit être refactorisé?

Les signes de code nécessitant une refactorisation incluent la duplication de code, des méthodes ou des fonctions excessivement longues, des classes trop importantes, une grande complexité et de mauvaises performances. Les outils d'analyse de code peuvent aider à identifier les domaines problématiques.

Quelles sont les techniques de refactorisation JavaScript communes?

Les techniques de refactorisation JavaScript communes englobent des méthodes d'extraction, de renommant des variables ou des fonctions, en supprimant le code mort, en simplifiant les expressions conditionnelles et en remplacement des variables temporaires par des requêtes directes.

Comment puis-je m'assurer que le refactorisation n'introduis pas de nouveaux bogues dans le code?

Les tests unitaires complets sont cruciaux. Exécutez des tests avant et après la refactorisation pour vérifier la fonctionnalité reste non affecté.

La refactorisation peut-elle améliorer les performances du code JavaScript?

Oui, le refactorisation peut considérablement augmenter les performances en éliminant le code inutile, en optimisant les fonctions et en simplifiant les expressions complexes. Cependant, la lisibilité et la maintenabilité devraient rester les principaux objectifs.

est-il nécessaire de refacter l'intégralité du code à la fois?

Non, une refactorisation incrémentielle, en se concentrant sur des zones ou des fonctions spécifiques, est généralement recommandé pour une meilleure gestion et un risque réduit.

Comment puis-je en savoir plus sur les techniques de refactorisation JavaScript?

De nombreuses ressources en ligne sont disponibles, y compris des tutoriels, des blogs, des livres et des cours vidéo. Une expérience pratique peut être acquise grâce à des défis de codage et des projets open source.

Quels outils puis-je utiliser pour refactoriser le code JavaScript?

IDE comme WebStorm et Visual Studio Code offrent des fonctionnalités de refactorisation intégrées. Les outils d'analyse de code tels que Eslint et Jshint aident à identifier les sections de code problématiques.

peut-il refactoriser une aide à la réduction de la taille du code JavaScript?

Oui, le refactorisation peut conduire à un code plus concis, en réduisant sa taille et en améliorant potentiellement les temps de chargement de la page Web.

refactoring un processus unique?

Non, le refactorisation est un processus continu intégré au cycle de vie du développement pour maintenir la qualité et l'efficacité du code.

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!