Gründe, anonyme JS-Funktionen nicht zu verwenden

In diesem Artikel werden die drei Hauptgründe analysiert, warum die anonyme Funktion von js nicht verwendet werden sollte. Die Funktion der anonymen JS-Funktion besteht darin, die Verschmutzung globaler Variablen und den Konflikt von Funktionsnamen zu vermeiden. Über js anonym Die drei Hauptgründe für Funktionen finden Sie in diesem Artikel Die Grundform anonymer Funktionen ist

(function(){...})();
Die ersten Klammern enthalten den Funktionskörper und Die folgenden Klammern dienen dazu, Parameter an die anonyme Funktion zu übergeben und sie sofort auszuführen

Der Zweck anonymer Funktionen besteht darin, die Verschmutzung globaler Variablen und Konflikte zwischen Funktionsnamen zu vermeiden

Egal wann Sie Beim Lesen des Codes müssen Sie auf anonyme Funktionen achten. Manchmal werden sie Lambdas genannt, manchmal anonyme Funktionen, aber ich denke, so oder so sind sie schwierig zu verwenden.

Wenn Sie nicht wissen, was eine anonyme Funktion ist, hier ein Zitat:

Eine anonyme Funktion ist eine Funktion, die zur Laufzeit dynamisch deklariert wird. Sie werden anonyme Funktionen genannt, da sie im Gegensatz zu gewöhnlichen Funktionen keine Funktionsnamen haben. — Helen Emerson, Herophant.com

Anonyme Funktionen haben die Form:

Ich versuche heute, jedem die Idee verständlich zu machen, dass anonyme Funktionen im Allgemeinen nur dann verwendet werden sollten, wenn dies absolut der Fall ist notwendig. Anonyme Funktionen sind nicht zu bevorzugen und sollten nur dann genutzt werden, wenn die Gründe dafür bekannt sind. Wenn Sie diese Idee verstehen, wird Ihr Code sauberer, einfacher zu warten und Fehler leichter zu verfolgen. Beginnen wir mit drei Gründen, die Verwendung anonymer Funktionen zu vermeiden:

function () { ... code ... }
OR
(args) => { ... code .. }

Wenn Sie Code schreiben, werden Sie immer auf Fehler stoßen, egal wie gut Sie Code eingeben können. Manchmal sind diese Fehler leicht zu erkennen, manchmal nicht.

Fehler können leicht erkannt werden, wenn man weiß, woher sie kommen. Um Fehler zu finden, verwenden wir dieses Tool namens Stack Trace. Wenn Sie sich mit Stack-Traces nicht auskennen, hat Google eine tolle Einführung.

Angenommen, es gibt jetzt ein sehr einfaches Projekt:

function start () {
 (function middle () {
 (function end () {
  console.lg('test');
 })()
 })()
}

Der obige Code enthält einen sehr dummen Fehler, einen Tippfehler (console.log ). Bei einem kleinen Projekt stellt dieser Rechtschreibfehler kein großes Problem dar. Wenn es sich um einen kleinen Abschnitt eines sehr großen Projekts mit vielen Modulen handelt, ist das Problem riesig. Vorausgesetzt, Sie haben diesen dummen Fehler nicht gemacht, wird der neue Junior-Ingenieur ihn in die Codebasis übernehmen, bevor er in den Urlaub fährt!

Jetzt müssen wir es aufspüren. Mit unserer sorgfältig benannten Funktion erhalten wir den folgenden Stack-Trace:

Vielen Dank für die Benennung Ihrer Funktionen, junge Entwickler! Jetzt können wir den Fehler leicht aufspüren.

Aber... nachdem wir das behoben hatten, stellten wir fest, dass es einen weiteren Fehler gab. Diesmal stammte es von einem erfahreneren Entwickler. Diese Person kennt Lambdas

Es stellt sich heraus, dass sie auf einen Fehler stößt und es unsere Aufgabe ist, ihn aufzuspüren.

Hier ist der Code:

Es überrascht nicht, dass dieser Entwickler auch vergessen hat, wie man console.log schreibt! Das ist ein zu großer Zufall! Schade, dass keiner von ihnen seine Funktionen benannt hat.

(function () {
 (function () {
 (function () {
  console.lg('test');
 })();
 })();
})();

Was wird die Konsole also ausgeben?

Na ja, zumindest haben wir noch Zeilennummern, oder? In diesem Beispiel sieht es so aus, als hätten wir etwa 7 Codezeilen. Was passiert, wenn wir es mit einem großen Codeblock zu tun haben? Etwa zehntausend Zeilen Code? Was sollen wir tun, wenn die Spanne der Zeilennummern so groß ist? Wenn nach dem Falten des Codes eine Code-

map

-Datei vorhanden ist, ist das Rendern von Zeilennummern dann überhaupt nutzlos? Ich denke, die Antwort auf diese Fragen ist ziemlich einfach: Wenn Sie über diese Dinge nachdenken, wird es Ihnen den ganzen Tag ziemlich schwer machen.

LesbarkeitHey, ich habe gehört, dass du es nicht geglaubt hast. Sie sind immer noch mit Ihrer anonymen Funktion verbunden und der Fehler ist nie aufgetreten. Nun, ich muss mich bei Ihnen dafür entschuldigen, dass ich Ihren Code für perfekt halte. Werfen wir einen Blick darauf!

Sehen Sie sich die folgenden zwei Codeteile an:

Dies ist ein sehr ungewöhnliches Beispiel, aber ich glaube, Sie verstehen bereits, was ich sagen werde. Unsere Methode gibt ein Versprechen zurück und wir verwenden diese Promise

function initiate (arguments) {
 return new Promise((resolve, reject) => {
 try {
  if (arguments) {
   return resolve(true);
  }
  return resolve(false);
 } catch (e) {
  reject(e);
 }
 });
}
initiate(true)
 .then(res => {
  if (res) {
   doSomethingElse();
  } else {
   doSomething();
  }
 ).catch(e => {
   logError(e.message);
   restartApp();
   }
 );

Object

/-Methode, um verschiedene mögliche Antworten zu verarbeiten. Sie denken vielleicht, dass diese wenigen Codeteile nicht schwer zu lesen sind, aber ich denke, sie können besser sein!

Was würde passieren, wenn wir alle anonymen Funktionen entfernen würden?

Okay, um es klarzustellen: Dieser Teil des Codes ist länger, aber ich denke, er ist mehr als nur besser lesbar! Unsere sorgfältig benannten Funktionen unterscheiden sich von anonymen Funktionen dadurch, dass wir ihre Funktion kennen, sobald wir ihre Namen sehen. Dies vermeidet Hindernisse bei der Codeauswertung.

function initiate (arguments) {
 return new Promise(checkForArguments);
}
function checkForArguments (resolve, reject) {
 try {
 if (arguments) {
  return resolve(true); 
 }
 return resolve(false);
 } catch (e) {
 reject(e);
 }
}
function evaluateRes (res) {
 if (res) {
 doSomethingElse();
 } else {
 doSomething();
 }
}
function handleError (e) {
 logError(e.message);
 restartApp();
}
initiate(true)
 .then(evaluateRes)
 .catch(handleError);

Dies hilft auch, den Zusammenhang zu klären. Anstatt eine Methode zu erstellen, sie zu übergeben und dann die Logik auszuführen, werden im zweiten Beispiel die Argumente an then übergeben und „catch“ verweist einfach auf die Funktion, in der alles passiert.

Über bessere Lesbarkeit kann ich Ihnen nichts mehr sagen. Aber wenn Sie noch nicht überzeugt sind, kann ich vielleicht noch ein letztes Argument versuchen.

Verwandte Empfehlungen:

Vorlagenmethode Singleton in Javascript

Detaillierte Erklärung von Javascript, um festzustellen, ob der Benutzer die Seite bedient hat

Verwenden Sie JavaScript um eine kleine Programm 99 Multiplikationstabelle zu implementieren

Das obige ist der detaillierte Inhalt vonGründe, anonyme JS-Funktionen nicht zu verwenden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!