Warum this.each (function ()) in jQuery-Plugins zurückgeben?

72

Einige der Tutorials und Beispiele, die ich für die Entwicklung von jQuery-Plugins gesehen habe, kehren in der Regel zurück 

this.each(function () {
    //Plugin code here
});

Am Ende der Funktion, die das Plugin instanziiert, aber ich habe noch keine Argumentation dahinter, scheint es nur ein Standard zu sein, dem jeder folgt. Kann mich jemand über die Gründe für diese Praxis aufklären?

Bearbeiten: Zur Verdeutlichung war meine Frage nicht, warum dies zurückgegeben werden sollte, sondern warum das Plugin dies zurückgeben sollte.

jquery jquery-plugins Corey Sunwold
quelle
Das ist komisch. Es scheint, als thiswäre eine Rückkehr eine weitaus bessere Idee.
Walt W
@ Walt W - ich stimme zu. Ich verstehe, warum wir dies zurückgeben würden, weil dies mit der Idee der fließenden Schnittstelle übereinstimmt. Aber der Teil, den ich nicht verstehe, ist jeder Anruf.
Corey Sunwold
Sind die Funktionen zur Verdeutlichung leer, als Sie sie geschrieben haben? Oder ist dort Code drin?
Walt W
@Walt w - Nein, die Funktionen sind nicht leer, ich hätte es klarstellen sollen. Ich werde mein Codebeispiel aktualisieren.
Corey Sunwold

Antworten:

78

Wenn Sie Elemente mit einem Selektor ( $('.myclass')) filtern , kann er mit mehr als nur einem Element übereinstimmen.
Mit eachiterieren Sie über alle übereinstimmenden Elemente und Ihr Code wird auf alle angewendet.

Felix Kling
quelle
1
Natürlich! Danke, ich denke, ich habe das jedes Mal als selbstverständlich angesehen, wenn ich zuvor Plugins verwendet habe.
Corey Sunwold
15
Während dies absolut wahr ist, ist der eigentliche Grund returndafür, Verkettung zuzulassen ...
Leo
3
@Mef: Nun, ich dachte, das ist klar und es geht mehr darum, warum man es benutzt each.
Felix Kling
Wenn Sie Code haben, den Sie einmal nach dieser .each () - Schleife ausführen möchten, können Sie diesen nach der Schleife und dem letzten Run-Code einfach zurückgeben?
Jacobq
24

jQuery unterstützt "verkettbare Methoden", was bedeutet, dass die meisten jQuery-Funktionen zurückgegeben werden sollten this. .each()kehrt zurück this, und wenn Sie arbeiten möchten $('selector').yourPlugin().css(...), sollten Sie return this.

Zwerg
quelle
6
Dies ist die richtige Antwort. Der Grund, warum Sie zurückkehren, besteht darin, die Verkettbarkeit zuzulassen.
Undefiniert
10

Lassen Sie mich Ihnen zwei "äquivalente" Codeteile zeigen, die Ihre Frage klären könnten:

Mit jQuery "each" -Funktion:

(function($) {
    $.fn.mangle = function(options) {
        return this.each(function() {
            $(this).append(' - ' + $(this).data('x'));
        });
    };
})(jQuery);

Ohne jQuery "jede" Funktion:

(function($) {
    $.fn.mangle = function(options) {
        var objs = this;
        for (var i=0; i<objs.length; i++) {
            var obj = objs[i];
            $(obj).append(' - ' + $(obj).data('x'));
        };
        return this;
    };
})(jQuery);

Grundsätzlich wird die eachFunktion verwendet, um Code auf alle im thisObjekt enthaltenen Elemente anzuwenden ( wie thisnormalerweise auf eine Gruppe von Elementen verweist, die von einem jQuery-Selektor zurückgegeben werden ) und den Verweis auf zurückzugeben this( da die eachFunktion immer diesen Verweis zurückgibt, um Verkettungsaufrufe zu ermöglichen). )

Als Randnotiz : Der zweite Ansatz ( - forloop- ) ist schneller (insbesondere bei alten Browsern) als der vorherige ( - eachfunction- ).

Rubensa
quelle
7

Wenn Sie ein Plugin schreiben, erweitern Sie das jQuery-Objekt. Da das jQuery-Objekt eine Sequenz ist, geben Sie es zurück, this.each(function () { });sodass Ihr Plugin für jedes Element der Sequenz ausgeführt wird.

Max Toro
quelle
1
aber du gibst eigentlich nur "eins" "dieses" zurück, oder? das jeder Teil ist separat, nicht wahr?
Hans
3
@Marcel: Ja, tatsächlich können Sie als zwei separate Anweisungen aufrufen eachund dann zurückkehren this. Es funktioniert, weil eachauch zurückkehrt this.
Max Toro
4

Kurz gesagt, Sie können die Verkettung nutzen, da alles zurückgegeben wird, was bisher getan wurde, damit das nächste .anyMethod()auf die geänderten / modifizierten Elemente einwirken kann.



Schauen Sie sich außerdem diese Links an, die Ihnen viele Informationen zur Entwicklung des jQuery-Plugins geben.

http://www.webresourcesdepot.com/jquery-plugin-development-10-tutorials-to-get-started/
http://www.learningjquery.com/2007/10/a-plugin-development-pattern
http: / /snook.ca/archives/javascript/jquery_plugin

Und hier haben Sie eine schöne webbasierte App, mit der Sie Ihre jQuery-Plugins sofort starten können. http://starter.pixelgraphics.us/

Adardesign
quelle