Conseils de refactorisation JavaScript

John Au-Yeung
Source : medium
Traducteur : Xiaozhi sur le front-end

Aimez et relisez pour prendre l'habitude

Ceci l'articleGitHub 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.

Décomposer les 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;

.

Combinez des expressions conditionnelles

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.

Fusionner les fragments conditionnels en double

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.

Supprimer le drapeau de contrôle

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) {
        //...
      }
    }
  }
}

Remplacer les conditions imbriquées par des instructions de garde

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'instructions if-then-else est convertie en plusieurs instructions if pour implémenter sa logique. La déclaration est la déclaration de garde. if

Les instructions conditionnelles imbriquées sont difficiles à lire, nous pouvons donc utiliser des

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 polymorphisme

Au 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

Par exemple, nous pourrions écrire du code comme ceci :

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

prend un objet vide

Si nous vérifions à plusieurs reprises

ou null, nous pouvons définir une sous-classe qui représente la version undefined ou null de la classe, puis utiliser que . undefined

Par exemple, nous pourrions écrire du code comme ceci :

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

Cela élimine le besoin d'utiliser des conditions pour vérifier ces valeurs.

---

Tutoriel recommandé : "

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!