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

Réduisez la charge de lecture, inspirez la pensée créative et apprenez facilement les compétences JavaScript Rigongyiping, jym, rush~

1. Définissez les nombres comme des constantes

, comme le code suivant :

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

Qui sait à quoi font spécifiquement référence ces 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 numéros de ce type, cela entraînera facilement une plus grande confusion.

Écrivez du JavaScript propre : définir le nombre comme une constante

résout clairement ce problème :

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

Maintenant, en déclarant le nom de la constante, on comprend immédiatement que 100 signifie « condition d'âge ». Lors de la modification, vous pouvez le localiser rapidement, le modifier en un seul endroit et prendre effet à plusieurs endroits.

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

Passer des valeurs booléennes dans des fonctions en tant que paramètres est une méthode d'écriture courante qui provoque facilement une confusion dans le code.

const validateCreature = (créature, isHuman) => {
  si (estHumain) {
    //...
  } autre {
    //...
  }
}

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 pour les fonctions, donc :

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

const validatePerson = (person) => {
  //...
}
const validateCreature = (créature) => {
  //...
}

3. Encapsulant plusieurs conditions,

nous écrivons souvent du code comme celui-ci :

if (
  personne.getAge() > 30 &&
  personne.getName() === "simon" &&
  personne.getOrigin() === "Suède"
) {
  //...
}

Ce n'est pas impossible, mais après un long moment, vous ne comprendrez 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 =
  personne.getAge() > 30 &&
  personne.getName() === "simon" &&
  person.getOrigin() === "Suède";
si (estSimon) {
  //...
}

ou

const isSimon = (personne) => {
  retour (
    personne.getAge() > 30 &&
    personne.getName() === "simon" &&
    personne.getOrigin() === "Suède"
  );
} ;
si (estSimon(personne)) {
  //...
}

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 jugements négatifs.

Dans les jugements conditionnels, l'utilisation de jugements négatifs entraînera un fardeau de réflexion supplémentaire.

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

const isCreatureNotHuman = (créature) => {
  //...
}

if (!isCreatureNotHuman(créature)) {
  //...
}

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

en le réécrivant dans les règles d'écriture suivantes pour le rendre plus facile à lire. Bien que ce ne soit qu'une petite astuce, dans une grande quantité de logique de code, suivre ce principe à de nombreux endroits sera certainement très. utile.

Souvent, lorsque je lis du code, je continue de lire. Quand je vois une "mauvaise" méthode d'écriture, 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 = (créature) => {
  //...
}
if (isCreatureHuman(créature)) {
  //...
}

5. Evitez beaucoup de if...else...

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

Par exemple, le code suivant :

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

Réécrit sous forme de map :

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

Un autre exemple est le code suivant :

const isMammal = (creature) => {
  if (créature === "humain") {
    renvoie vrai ;
  } else if (créature === "chien") {
    renvoie vrai ;
  } else if (créature === "chat") {
    renvoie vrai ;
  }
  //...
renvoie faux ;
}

Réécrit sous forme de tableau :

const isMammal = (creature) => {
  const mammifères = ["humain", "chien", "chat", /* ... */];
  return mammifères.includes(créature);
}

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

Donc, quand il y a beaucoup de if...else... dans le code, réfléchissez encore un peu et voyez si vous pouvez apporter une petite modification pour rendre le code plus "propre" ".

Résumé : Les techniques ci-dessus ne valent peut-être pas la peine d'être mentionnées 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 produiront certainement des effets positifs et une aide dépassant même l'imagination.

Ce qui précède est de savoir comment écrire du code JS propre ? 5 conseils d'écriture sont partagés en détail. Pour plus d'informations, veuillez prêter attention aux autres articles connexes sur le site Web PHP chinois !