So verwenden Sie anonyme JS-Funktionen

Dieses Mal zeige ich Ihnen, wie Sie anonyme JS-Funktionen verwenden und welche Vorsichtsmaßnahmen bei der Verwendung anonymer JS-Funktionen gelten . . Die Grundform einer anonymen Funktion ist

(function(){...})(); Die erste Klammer enthält den Funktionskörper, und die folgende Klammer dient dazu, Parameter an die anonyme Funktion zu übergeben und diese sofort auszuführen

Der Zweck anonymer Funktionen besteht darin, globale Variablenverschmutzung und Funktionsnamenkonflikte zu vermeiden

Wenn Sie Code lesen, müssen Sie sich der anonymen Funktionen bewusst sein. 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, finden Sie 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, Helenphant.com

Die anonyme Funktion hat die folgende Form:

Heute versuche ich, Ihnen die Idee verständlich zu machen, anonyme Funktionen im Allgemeinen nur dann zu verwenden, wenn dies unbedingt erforderlich ist. 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 lassen sich leicht erkennen, 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, wir haben ein sehr einfaches Projekt:

Es gibt einen sehr dummen Fehler im obigen Code, 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!

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

Jetzt müssen wir der Sache auf den Grund gehen. Mit unserer sorgfältig benannten Funktion erhalten wir einen Stack-Trace wie diesen:

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?

Nun ja, wir haben zumindest 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: Das Nachdenken über diese Dinge wird Ihren Tag ziemlich unglücklich machen.

Lesbarkeit Hey, ich habe gehört, dass du es immer noch nicht glaubst. 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!

Schauen Sie sich die folgenden zwei Codeteile an:

Das ist ein sehr ungewöhnliches Beispiel, aber ich glaube, Sie verstehen, 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. Man könnte meinen, 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 abschaffen 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);

好，先讲清楚：这部分代码更长，但我认为其不仅仅是有更多的可读性！我们精心命名的函数与匿名函数不一样，只要我们一看到它们的名字就知道它们的功能是什么。这避免了在评估代码时的障碍。

这也有助于分清楚其中的关系。与创建一个方法、将其传递、然后运行逻辑不同，在第二个例子中的参数被给到了then，catch只是指向了发生所有事情的函数。

关于更具有可读性，我没有什么再能说服你的了。但是也许你还没被说服的话，我可以试一下最后的论据。

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

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