Explication détaillée de la façon dont JavaScript réduit la complexité des fonctions

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 verrons comment réduire la complexité des fonctions.

Déplacez le code en double vers le même emplacement

Nous devrions extraire le code en double et le fusionner au même emplacement, donc quand quelque chose a besoin pour être modifié, il suffit de changer d'un endroit, ce qui réduit également le taux d'erreur.

Supposons que nous puissions facilement écrire le code suivant :

const button = document.querySelector('button');
let toggled = true;
button.addEventListener('click', () => {
  toggled = !toggled;
  if (toggled) {
    document.querySelector("p").style.color = 'red';
  } else {
    document.querySelector("p").style.color = 'green';
  }
})

Il y en a deux document.querySelector(“p”) dans le code ci-dessus. Nous pouvons l'optimiser comme ceci, enregistrer document.querySelector(“p”) dans une variable, puis. Utilisez simplement cette variable, comme indiqué ci-dessous :

const button = document.querySelector('button');
const p = document.querySelector("p");
let toggled = true;
button.addEventListener('click', () => {
  toggled = !toggled;
  if (toggled) {
    p.style.color = 'red';
  } else {
    p.style.color = 'green';
  }
}

De cette façon, nous n'avons pas besoin d'écrire un long document.querySelector("p"), écrivez simplement une variable p.

Les chiffres dans un autre exemple de code courant, il est difficile de savoir ce qu'ils représentent rien qu'en regardant les chiffres :

let x = 1;
let y = 1;
let z = 1;

Nous ne savons pas ce que représentent les trois ci-dessus, nous peut déplacer Supprimer les codes en double et les représenter avec un nom de variable approprié, comme suit :

const numPeople = 1;
let x = numPeople;
let y = numPeople;
let z = numPeople;

Nous pouvons donc savoir que la valeur de numPeople est 1, qui représente le nombre de personnes.

Simplifier la fonction

La fonction doit être aussi simple que possible, de préférence ne faire qu'une chose, et le nombre de lignes ne doit pas être trop grand , pas plus de 30 lignes.

Nous ne devons pas utiliser de classes ES5, ni IIFE pour les modules ou les blocs. Au lieu de cela, nous devrions utiliser la syntaxe de classe, où nous pouvons inclure plusieurs méthodes d'instance de la classe dans une classe. Cela réduira considérablement la taille de la fonction.

De même, tant que nous pouvons définir des fonctions, les fonctions doivent être des fonctions pures, ce qui signifie qu'elles ne doivent pas avoir d'effets secondaires.

Par exemple, la meilleure fonction simple est la suivante :

const add = (a, b) => a + b;

La fonction ci-dessus n'a aucun effet secondaire car elle ne modifie aucune variable en dehors de la fonction. De plus, c'est aussi une fonction pure. Pour la même entrée, le résultat de sortie est également le même.

Utilisez des instructions de garde au lieu d'instructions imbriquées

La définition et l'utilisation des instructions de garde

Les instructions de garde sont complexes déclarations 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. L'instruction if est une instruction de garde <. 🎜>

Parfois, le conditionnel peut apparaître n fois dans le nid avant de pouvoir réellement être exécuté, et d'autres branches signalent simplement une erreur et renvoient. Dans ce cas, la branche qui signale une erreur doit être vérifiée séparément. , revient immédiatement lorsque la condition est vraie, une telle vérification séparée est une clause de garde (les clauses de garde peuvent libérer nos yeux de la gestion des exceptions et se concentrer sur le code de traitement normal).

Par exemple, on pourrait écrire le code suivant :

const greet = (firstName, lastName, greeting) => {
  if (typeof firstName === 'string') {
    if (typeof lastName === 'string') {
      if (typeof greeting === 'string') {
        return `${greeting}, ${firstName}${lastName}`;
      }
    }
  }
}

On peut optimiser comme ça

const greet = (firstName, lastName, greeting) => {
  if (typeof firstName !== 'string') {
    throw new Error('first name is required');
  }
  if (typeof lastName !== 'string') {
    throw new Error('last name is required');
  }
  if (typeof greeting !== 'string') {
    throw new Error('greeting is required');
  }
  return `${greeting}, ${firstName}${lastName}`;
}

Dans le deuxième exemple, si chaque paramètre n'est pas une chaîne, alors Throws une erreur, éliminant ainsi les instructions

imbriquées. if

Cela réduit les instructions

imbriquées en instructions if non imbriquées tout en effectuant la même opération. if

Les nids sont difficiles à lire et à comprendre, et nous devrions nous en débarrasser partout.

Résumé

Le code en double est toujours mauvais. Nous devons toujours nous rappeler le principe « Ne vous répétez pas (DRY) ».

De plus, de nouvelles méthodes devraient être utilisées pour remplacer les méthodes d'écriture de l'ère ES5.

Enfin, les instructions

imbriquées doivent être remplacées par des instructions de garde, car elles peuvent effectuer les mêmes vérifications que les instructions if imbriquées, ce qui facilite la lecture. if

Pour plus de connaissances sur la programmation, veuillez visiter :

Introduction à la programmation ! !

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!