Maison >interface Web >js tutoriel >Conseils de refactorisation JavaScript
John Au-Yeung
Source : medium
Traducteur : Xiaozhi sur le front-end
Aimez et relisez pour prendre l'habitudeCeci l'article
GitHub
https://github.com/qq44924588... a été inclus, davantage de catégories d'articles passés très appréciés, et beaucoup de mes documents et tutoriels ont également été compilés. Bienvenue chez Star and Perfect. Vous pouvez vous référer aux points de test pour les examiner lors de l'entretien. J'espère que nous pourrons apprendre quelque chose ensemble.
JavaScript est un langage de programmation facile à apprendre, et il est facile d'écrire des programmes qui s'exécutent et font quelque chose. Cependant, écrire du code JavaScript propre est difficile.
Dans cet article, nous présenterons quelques idées de reconstruction liées à l'optimisation des expressions conditionnelles.
Nous pouvons décomposer les expressions conditionnelles longues en expressions conditionnelles courtes et nommées, ce qui est bénéfique pour la lecture. Par exemple, nous pourrions écrire du code comme celui-ci :
let ieIEMac = navigator.userAgent.toLowerCase().includes("mac") && navigator.userAgent.toLowerCase().includes("ie")
Le code ci-dessus est trop long et peu propice à la lecture. Nous pouvons le décomposer en plusieurs expressions conditionnelles courtes et nommées, comme indiqué ci-dessous :
let userAgent = navigator.userAgent.toLowerCase(); let isMac = userAgent.includes("mac"); let isIE = userAgent.toLowerCase().includes("ie"); let isMacIE = isMac && isIE;.
Contrairement à ce qui précède, si vous avez plusieurs expressions conditionnelles courtes, vous pouvez les fusionner en une seule. Par exemple, nous pourrions écrire du code comme ceci :
const x = 5; const bigEnough = x > 5; const smallEnough = x < 6; const inRange = bigEnough && smallEnough;
Nous pouvons le combiner comme ceci :
const x = 5; const inRange = x > 5 && x < 6;
Parce que l'expression est très courte, même les combiner ne rendra pas l'expression plus longue, donc nous peut faire ça.
Si nous avons des expressions ou des instructions en double dans des blocs conditionnels, nous pouvons les déplacer. Par exemple, nous pourrions écrire du code comme ceci :
if (price > 100) { //... complete(); } else { //... complete(); }
Nous pouvons déplacer le contenu répété en dehors de l'expression conditionnelle, comme indiqué ci-dessous :
if (price > 100) { //... } else { //... } complete();
De cette façon, nous n'avons pas besoin d'appeler complete
let done = false; while (!done) { if (condition) { done = true; } //... }inutilement 🎜>Fonction.
Si nous utilisons le drapeau de contrôle dans la boucle, le code devrait ressembler à ceci :
let done = false; while (!done) { if (condition) { break; } //... }
Dans le code ci-dessus, done
est le contrôle flag , lorsque condition
est true
, définissez done
sur true
pour arrêter la boucle while
.
Par rapport à ce qui précède, nous pouvons utiliser break
pour arrêter la boucle, comme indiqué ci-dessous :
const fn = () => { if (foo) { if (bar) { if (baz) { //... } } } }
L'instruction de garde consiste à combiner complexe L'expression conditionnelle est divisée en plusieurs expressions conditionnelles.Par exemple, une expression très complexe imbriquée avec plusieurs couches d'instructionsLes instructions conditionnelles imbriquées sont difficiles à lire, nous pouvons donc utiliser desif-then-else
est convertie en plusieurs instructionsif
pour implémenter sa logique. La déclaration est la déclaration de garde.if
instructions de garde à leur place. Par exemple, nous pourrions écrire du code comme ceci :
if (!foo) { return; } if (!bar) { return; } if (baz) { //... } }Nous pouvons optimiser comme ceci :
if (!foo) { return; }Dans le code ci-dessus, les instructions de garde sont :
if (!bar) { return; }et
class Animal { constructor(type) { this.type = type; } getBaseSpeed() { return 100; } getSpeed() { switch (this.type) { case ('cat'): { return getBaseSpeed() * 1.5 } case ('dog'): { return getBaseSpeed() * 2 } default: { return getBaseSpeed() } } } }Si ces conditions sont fausses, elles renvoient la fonction plus tôt, nous n'avons donc pas besoin d'imbriquer. Remplacer les conditions par le polymorphismeAu lieu d'utiliser les instructions
pour effectuer la même chose pour différents types de données, nous pouvons utiliser l'instruction switch
pour créer la même sous-classe pour différents types de données. opérations sur les données, puis utilisez différentes méthodes en fonction du type d’objet. switch
class Animal { constructor(type) { this.type = type; } getBaseSpeed() { return 100; } } class Cat extends Animal { getSpeed() { return super.getBaseSpeed() * 1.5; } } class Dog extends Animal { getSpeed() { return super.getBaseSpeed() * 2; } }Nous pouvons le refactoriser comme ceci :
class Person { //... }Lorsque l'instruction
est très longue, elle devrait être différents types d'objets Blocs switch
personnalisés. case
ou null
, nous pouvons définir une sous-classe qui représente la version undefined
ou null
de la classe, puis utiliser que . undefined
class Person { //... } class NullPerson extends Person { //... }Nous pouvons refactoriser comme ceci :
rrreee
Ensuite, nous définissons sur Person
ou null
propriété d'objet au lieu de la définir sur une instance NullPerson. undefined
Tutoriel JS"
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!