N'écrivez pas une fonction anonyme en JavaScript

Fondamentalement, les "Anonymes" nous le connaissons bien, comme quelqu'un dont nous ne connaissons pas les informations exactes sur qui il est ? où sont-ils? etc. Dans cet article, nous allons essayer d'expliquer la relation du terme "Anonyme" en JavaScript.

La plupart du temps, nous travaillons avec JavaSript au jour le jour, ce qui ne peut pas être séparé de l'écriture de "fonction", soit nous faisons simplement une somme, soit nous a + b + cgérons quelque chose comme un effet secondaire. Fondamentalement, il n'y a pas de modèle exact selon lequel "hé, vous devriez écrire votre fonction comme ceci" , mais JavaScript a servi un type que nous pouvons suivre, tel que :

1. Fonction de déclaration
2. Fonction comme expression
3. Fonction en tant que constructeur

(function () {
  throw new Error("here");
})();

Imaginez que notre code est volumineux et comporte 1001 fonctions qui doivent être exécutées et qu'il y a ensuite une erreur indésirable dans la fonction no 900e, car nous avons écrit la fonction de manière anonyme, nous ne savons donc pas quel est le nom de la fonction et où l'erreur est.

Ce sera difficile pour nous de déboguer. C'est ce que j'ai dit que les fonctions anonymes peuvent même être un ennemi pendant le développement, même lorsque nous avons écrit cette fonction par nous-mêmes, peut-être à l'époque.

La plupart du temps, nous aurons cette question à l'esprit, que signifie cette fonction ? quand cette fonction a été exécutée? où cette fonction nous la plaçons sur notre référentiel? peut-être que cette question se posera rarement si nous construisons par nous-mêmes (indépendants) mais, disons que nous venons d'une grande équipe ? et qu'un autre membre essaie de résoudre ce problème, il aura fallu beaucoup de temps pour trouver la cause première de l'erreur.

Mais, c'est une autre histoire si nous essayons de donner le nom de notre fonction quelque chose comme ça

(function thisIsOurFunction() {
  throw new Error("oops");
})();

Aforeimage, nous voyons que cette erreur imprime également notre nom de fonction thisIsOurfunctionqui indique où nous pouvons corriger cette erreur.

Cela s'applique-t-il uniquement à React, Vue, Angular ou Svelte ? Non, c'est l'approche agnostique que nous devons appliquer sur notre code pour nous assurer que s'il y a quelque chose qui cloche sur la production, nous pouvons le retracer facilement même pour nous-mêmes sur d'autres membres qui essaient de corriger ce bogue.

Si votre projet/dépôt vient avec la configuration ESLint, vous pouvez essayer d'installer ces plugins eslint-plugin-import/no-anonymous cela peut nous permettre de le détecter facilement pendant que nous écrivons notre code.