Comment écrire du code JS propre ? 5 conseils d'écriture à partager

Comment écrire du code JS propre ? Dans cet article, je vais partager avec vous 5 conseils pour écrire du JavaScript propre. J'espère que cela vous sera utile !

Réduisez le fardeau de la lecture, inspirez la pensée créative et apprenez facilement les compétences JavaScript. Le soleil se lève et un pion, jym, se précipite ~

1 Définissez les nombres comme des constantes

Nous utilisons souvent des nombres, tels que. comme le code suivant :

const isOldEnough = (person) => {
  return person.getAge() >= 100;
}

Qui sait à quoi fait spécifiquement référence ce 100 ? Nous devons généralement combiner le contexte de la fonction pour spéculer et juger quelle valeur ces 100 peuvent spécifiquement représenter.

S’il existe plusieurs de ces numéros, cela entraînera facilement une plus grande confusion.

Écrivez du JavaScript propre : définissez les nombres comme constantes

pour résoudre ce problème clairement :

const AGE_REQUIREMENT = 100;
const isOldEnough = (person) => {
  return person.getAge() >= AGE_REQUIREMENT;
}

Maintenant, en déclarant le nom de la constante, nous pouvons immédiatement comprendre que 100 signifie "exigence d'âge" . Il peut également être rapidement localisé lors de modifications, et une modification peut prendre effet à plusieurs endroits.

2. Évitez d'utiliser des valeurs booléennes comme paramètres de fonction

Transmettre des valeurs booléennes dans des fonctions en tant que paramètres est une manière courante d'écrire qui peut facilement provoquer une confusion dans le code.

const validateCreature = (creature, isHuman) => {
  if (isHuman) {
    // ...
  } else {
    // ...
  }
}

La valeur booléenne passée dans la fonction en tant que paramètre ne peut pas exprimer une signification claire. Elle peut seulement indiquer au lecteur que cette fonction portera un jugement et produira deux ou plusieurs situations.

Cependant, nous préconisons le principe de responsabilité unique des fonctions, donc :

Écrivez du JavaScript propre : évitez les valeurs booléennes comme paramètres de fonction

const validatePerson = (person) => {
  // ...
}
const validateCreature = (creature) => {
  // ...
}

3.Encapsulez plusieurs conditions

Nous écrivons souvent du code comme celui-ci :

if (
  person.getAge() > 30 &&
  person.getName() === "simon" &&
  person.getOrigin() === "sweden"
) {
  // ...
}

Ce n'est pas impossible, mais après un long moment, vous ne comprendrez soudainement plus à quoi servent ces jugements, il est donc recommandé d'encapsuler ces conditions avec des variables ou des fonctions.

Écrivez du JavaScript propre : encapsulez plusieurs conditions

const isSimon =
  person.getAge() > 30 &&
  person.getName() === "simon" &&
  person.getOrigin() === "sweden";
if (isSimon) {
  // ...
}

ou

const isSimon = (person) => {
  return (
    person.getAge() > 30 &&
    person.getName() === "simon" &&
    person.getOrigin() === "sweden"
  );
};
if (isSimon(person)) {
  // ...
}

Oh, il s'avère que ces conditions servent à déterminer si cette personne est Simon ~

Ce type de code est un code de style déclaratif, qui est plus lisible .

4. Évitez les conditions de jugement négatif

Dans le jugement conditionnel, l'utilisation du jugement négatif entraînera un fardeau de réflexion supplémentaire.

Par exemple, dans le code ci-dessous, la condition !isCreatureNotHuman(creature) est un double négatif, ce qui la rend un peu difficile à lire.

const isCreatureNotHuman = (creature) => {
  // ...
}

if (!isCreatureNotHuman(creature)) {
  // ...
}

Écrivez du JavaScript propre : évitez les conditions de jugement négatif

Réécrivez-le dans les règles d'écriture suivantes pour le rendre plus facile à lire. Bien qu'il ne s'agisse que d'une petite astuce, dans une grande quantité de logique de code, suivez-la à de nombreux endroits. Les principes seront certainement utiles.

Souvent, en lisant du code, je lis et lis. Quand je vois une écriture "terrible", je n'en peux plus. Les détails se superposent et une digue de mille kilomètres s'effondre dans un nid de fourmis.

const isCreatureHuman = (creature) => {
  // ...
}
if (isCreatureHuman(creature)) {
  // ...
}

5. Évitez beaucoup de if...else...

Ce point a toujours été souligné par moi :

Par exemple, le code suivant :

if(x===a){
   res=A
}else if(x===b){
   res=B
}else if(x===c){
   res=C
}else if(x===d){
    //...
}

Réécrit en écriture cartographique :

let mapRes={
    a:A,
    b:B,
    c:C,
    //...
}
res=mapRes[x]

Un autre exemple est le code suivant :

const isMammal = (creature) => {
  if (creature === "human") {
    return true;
  } else if (creature === "dog") {
    return true;
  } else if (creature === "cat") {
    return true;
  }
  // ...
return false;
}

Réécrit dans un tableau :

const isMammal = (creature) => {
  const mammals = ["human", "dog", "cat", /* ... */];
  return mammals.includes(creature);
}

Écrire du JavaScript propre : évitez beaucoup de if...else...

Donc, quand il y a beaucoup de if... sinon... dans le code, plus Pensez-y et voyez si vous pouvez apporter quelques modifications pour rendre le code "plus propre".

---

Résumé : Les conseils ci-dessus ne semblent peut-être pas valoir la peine d'être mentionnés dans des exemples, mais dans les projets réels, lorsque la logique métier devient complexe et que la quantité de code devient importante, ces conseils auront certainement un effet positif, utile, même au-delà de l'imagination. .

【Recommandations associées : Tutoriel d'apprentissage Javascript】

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!