Welche Vorteile bietet die Verwendung anonymer Funktionen anstelle von benannten Funktionen für Callbacks und Parameter im JavaScript-Ereigniscode?

Ich nutze anonyme Funktionen aus drei Gründen:

1. Wenn kein name benötigt, da die Funktion immer nur aufgerufen, an einem Ort, warum dann fügen Sie einen Namen, um was auch immer-namespace, die Sie in.
2. Anonyme Funktionen deklariert sind inline-und inline-Funktionen haben Vorteile, Sie können den Zugriff auf Variablen, die in den übergeordneten Bereichen. Ja, Sie können einen Namen auf eine anonyme Funktion, aber das ist in der Regel sinnlos, wenn es das erklärte inline. Also inline-hat einen bedeutenden Vorteil und wenn du tust, inline, gibt es wenig Grund zu benennen.
3. Der code scheint nicht mehr in sich abgeschlossen und lesbar, wenn der Handler definiert werden direkt im code aufrufen. Lesen Sie den code in fast sequenziell anstatt zu gehen, finden Sie die Funktion mit diesem Namen.

Ich versuche zu vermeiden, die Tiefe der Schachtelung von anonymen Funktionen, da kann sein haarige zu verstehen und zu Lesen. In der Regel, wenn das passiert, gibt es einen besseren Weg, um die Struktur des Codes (manchmal mit einer Schleife, manchmal mit einer Daten-Tabelle, etc...) und der genannten Funktionen ist in der Regel nicht die Lösung gibt.

Ich glaube, ich würde hinzufügen, dass, wenn ein Rückruf gestartet, um mehr als 15 bis 20 Zeilen lang und es braucht nicht den direkten Zugriff auf die Variablen im übergeordneten Bereich, ich würde versucht sein, geben Sie einen Namen ein und brechen es in seine eigene benannte Funktion deklariert anderswo. Es ist definitiv eine Lesbarkeit Punkt hier, wo Sie eine nicht-triviale Funktion, wird lange nur mehr wartbar, wenn es in seine eigene benannte Einheit. Aber die meisten Rückrufe habe ich am Ende nicht, dass lange, und ich finde es besser lesbar zu halten, Sie inline.

InformationsquelleAutor der Antwort jfriend00

Gut, nur klar zu sein, wegen meiner Argumente, die folgenden sind alle anonyme Funktionen/Funktion Ausdrücken in meinem Buch:

var x = function(){ alert('hi'); },

indexOfHandyMethods = {
   hi: function(){ alert('hi'); },
   high: function(){
       buyPotatoChips();
       playBobMarley();
   }
};

someObject.someEventListenerHandlerAssigner( function(e){
    if(e.doIt === true){ doStuff(e.someId); }
} );

(function namedButAnon(){ alert('name visible internally only'); })()

Vorteile:

• Kann es zu reduzieren ein wenig Reste, insbesondere in rekursiven Funktionen (wo man konnte (sollte eigentlich, da Argumente.angerufene ist veraltet) noch die Verwendung einer benannten Referenz pro das Letzte Beispiel intern) und verdeutlicht die Funktion immer nur Brände in diesem einem Ort.

• Lesbarkeit der Codes gewinnen: am Beispiel der Objekt-literal mit anon funcs zugeordnet, da die Methoden, es würde albern sein, um hinzuzufügen mehr Plätze für die Jagd und picken für die Logik in deinem code wird die ganze Sache, die Objekt-literal ist plop einige zusammenhängende Funktionalitäten in die gleiche bequem referenzierten Stelle. Bei der Deklaration von public-Methoden in einem Konstruktor, aber ich dazu neigen, zu definieren, beschriftet inline-Funktionen und weisen Sie dann als Verweise auf diese.sameFuncName. Es lässt mich mit den gleichen Methoden intern, ohne den '.' cruft ' und macht, um der definition eine nicht-Sorge, wenn Sie einander anrufen.

• Nützlich für die Vermeidung von unnötig globalen namespace-Verschmutzung - internen namespaces, jedoch sollten nicht immer sein, dass weitgehend gefüllt oder behandelt werden, die von mehreren teams gleichzeitig, so dass argument scheint ein wenig albern für mich.

• Stimme ich mit der inline-Rückrufe auf, wenn die Einstellung kurzes event-Handler. Es ist dumm, um auf die Jagd nach einem 1-5-line-Funktion, vor allem, da mit JS und Funktion hochziehen, die Definitionen könnten überall landen, auch nicht innerhalb der gleichen Datei. Dies könnte geschehen durch Zufall, ohne etwas zu zerbrechen und Nein, Sie haben nicht immer die Kontrolle über das Zeug. Ereignisse immer in eine callback-Funktion ausgelöst wird. Es gibt keinen Grund, weitere Verknüpfungen hinzufügen, um die Kette der Namen, die Sie Scannen müssen nur durch reverse Engineering einfachen event-Handler in einer großen Codebasis und der stack-trace Anliegen können angesprochen werden-durch die Abstraktion Ereignis löst sich in Methoden, die log nützliche Informationen, wenn Sie den debug-Modus eingeschaltet und die Trigger auslösen. Ich bin eigentlich anfangen zu bauen gesamte Oberfläche diese Art und Weise.

• Nützlich, wenn Sie WOLLEN, die Reihenfolge der definition einer Funktion, egal. Manchmal möchten Sie sicher sein, eine Standard-Funktion ist, was Sie denken, es ist bis zu einem bestimmten Punkt im code, wo es okay ist, neu zu definieren. Oder Sie möchten Bruch deutlicher werden, wenn Abhängigkeiten gemischt.

Nachteile:

• Anon Funktionen nicht nutzen kann, der Funktion hochziehen. Dies ist ein großer Unterschied. Ich neigen dazu, schwere Vorteil der Hub zu definieren, meine eigenen explizit benannt funcs-und Objekt-Konstruktoren in Richtung Boden und man die Objekt-definition und main-loop-Art Zeug an der Spitze. Ich finde es macht den code leichter zu Lesen, wenn Sie Namen für Ihre vars gut und erhalten einen breiten Blick auf, was Los ist, bevor Sie Strg-Fing für die details nur dann, wenn Sie Sie mögen. Hochziehen kann auch ein großer Vorteil im stark event-getrieben, Schnittstellen, wo die Einführung einer strengen Reihenfolge, was Wann kann dir in den Hintern beißt. Hochziehen hat eigene Vorbehalte (wie zirkuläre Referenz-potential), aber es ist ein sehr nützliches Werkzeug für die Organisation und macht code lesbar, wenn richtig eingesetzt.

• Lesbarkeit/Debug. Absolut Sie gewöhnen sich viel zu stark in Zeiten, und es machen können debug-und code-Lesbarkeit ein Streit. Die codebase, die sich stark auf JQ, zum Beispiel, kann ein ernstes PITA zu Lesen und zu Debuggen, wenn Sie nicht einkapseln der Nähe-unvermeidlich anon-schwer und Massiv überlastet args $ Suppe in eine vernünftige Art und Weise. JQuery ' s hover-Methode, zum Beispiel, ist ein klassisches Beispiel für die über-die Verwendung der anon-funcs, wenn Sie fallen zwei anon funcs hinein, da es einfach für ein first-timer nehme an, es ist ein standard-Ereignis-listener-Zuordnung Methode eher als eine Methode überladen zu weisen-Handler für eine oder zwei Veranstaltungen. $(this).hover(onMouseOver, onMouseOut) ist viel mehr klar, als zwei anon funcs.

InformationsquelleAutor der Antwort Erik Reppen

Etwas spät zur party, aber einige noch nicht erwähnte Aspekte zu Funktionen, anonyme oder anderweitig...

Anon funcs sind nicht einfach im Sinne Humanoide Gespräche über den code, der unter einem team. E. g., "Joe, könntest du erklären, was der Algorithmus tut, innerhalb dieser Funktion. ... Welches? Die 17 anonyme Funktion innerhalb der fooApp Funktion. ... Nein, nicht das! Der 17!"

Anon funcs anonym sind, um den debugger als gut. (duh!) Also die debugger-stack-trace wird in der Regel zeigen nur ein Fragezeichen oder ähnlich, so dass es weniger nützlich, wenn Sie mehrere Haltepunkte. Sie den Haltepunkt, sondern sich finden, scrollen Sie das debug-Fenster oben/unten, um herauszufinden, wo zur Hölle Sie sind in Ihrem Programm, weil, hey, Frage mark-Funktion funktioniert einfach nicht!

Bedenken über die Verschmutzung der globalen namespace gültig sind, aber leicht behoben werden, indem Sie die Benennung Ihrer Funktionen als Knoten innerhalb Ihrer eigenen root-Objekt, wie "myFooApp.happyFunc = Funktion ( ... ) { ... }; ".

Zur Verfügung stehenden Funktionen in den globalen Namensraum oder als Knoten in Ihrem root-Objekt wie oben angegeben, die aufgerufen werden können vom debugger direkt, während der Entwicklung und Debuggen. E. g., an der Konsole mit dem Befehl line, "myFooApp.happyFunc(42)". Dies ist eine extrem mächtige Fähigkeit, die nicht existiert (nativ) in kompilierten Programmiersprachen. Versuchen Sie das mal mit einem anon func.

Anon funcs gemacht werden können, besser lesbar, indem Sie Sie zu einer var und dann vorbei an der var als callback (statt inlining). E. g.:
var funky = function ( ... ) { ... };
jQuery('#otis').klicken Sie auf(funky);

Mit dem obigen Ansatz, könnten Sie möglicherweise Gruppe mehrere anon funcs an der Spitze des elterlichen func, dann unten, dass das Fleisch von sequentiellen Anweisungen wird viel enger gruppiert und einfacher zu Lesen.

InformationsquelleAutor der Antwort RickS