Warum nicht anonyme JS-Funktionen verwenden?

In diesem Artikel werden hauptsächlich die drei Hauptgründe für die Nichtverwendung anonymer js-Funktionen analysiert. Die Rolle anonymer Funktionen besteht darin, die Verschmutzung globaler Variablen und Konflikte zwischen Funktionsnamen zu vermeiden Ich hoffe, Sie können allen helfen.

Die Grundform einer anonymen Funktion ist (function(){...})();

Die erste Klammer enthält den Funktionskörper und die folgende Klammer ist to Parameter an die anonyme Funktion übergeben und sofort ausführen

Die Rolle anonymer Funktionen besteht darin, die Verschmutzung globaler Variablen und Konflikte zwischen Funktionsnamen zu vermeiden

Egal, wann Sie den Code lesen , müssen Sie auf anonyme Funktionen achten. Manchmal werden sie Lambdas genannt, manchmal anonyme Funktionen, aber ich denke, dass sie in beiden Fällen schwierig zu verwenden sind.

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:

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

Ich versuche heute, allen 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 sollten nicht bevorzugt und nur bei bekannten Gründen genutzt werden. 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:

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');
 })()
 })()
}

Im obigen Code ist ein sehr dummer Fehler, ein 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. Dieses Mal wurde es von einem erfahreneren Entwickler eingeführt. 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:

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

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.

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? Ist das Rendern von Zeilennummern überhaupt nutzlos, wenn nach dem Falten des Codes eine Codezuordnungsdatei vorhanden ist?

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.

Lesbarkeit

Hey, 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 beiden Codeteile an:

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();
   }
 );

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 dieses Versprechenobjekt/diese 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?

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);

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 ihren Namen sehen. Dies vermeidet Hindernisse bei der Codeauswertung.

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:

Das Problem beim Festlegen anonymer Funktionen für Schaltflächenschleifen in js

Häufig verwendete anonyme Funktionen

Detaillierte Erläuterung der Verwendung anonymer js-Funktionen und Beispiele für die Parameterübergabe

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