web-dev-qa-db-fra.com

Pourquoi retourner this.each (function ()) dans les plugins jQuery?

Certains des tutoriels et exemples que j'ai vus pour développer des plugins jQuery ont tendance à revenir

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

à la fin de la fonction qui instancie le plugin mais je n'ai pas encore vu de raisonnement derrière, il semble que ce soit un standard que tout le monde suit. Quelqu'un peut-il m'éclairer sur le raisonnement derrière cette pratique?

Edit: Par souci de clarté, ma question n'était pas de savoir pourquoi retourner ceci, mais plutôt pourquoi le plugin devrait retourner this.each.

jqueryjquery-plugins
71
Corey Sunwold

Lorsque vous filtrez des éléments avec un sélecteur ($('.myclass')), il peut correspondre à plusieurs éléments.
Avec each, vous parcourez tous les éléments correspondants et votre code est appliqué à chacun d'eux.

76
Felix Kling

jQuery prend en charge les "méthodes chaînables", ce qui signifie que la plupart des fonctions jQuery doivent renvoyer this. .each() renvoie this, et si vous voulez que $('selector').yourPlugin().css(...) fonctionne, vous devez return this.

23
gnarf

Permettez-moi de vous montrer deux morceaux de code "équivalents" qui pourraient clarifier votre question:

Avec jQuery "each" fonction:

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

Sans fonction jQuery "each":

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

Donc, fondamentalement, la fonction each est utilisée pour appliquer du code à tous les éléments contenus dans l'objet this ( car this fait généralement référence à un groupe d'éléments retournés par un sélecteur jQuery ) et renvoie la référence à this ( car la fonction each renvoie toujours cette référence -pour autoriser le chaînage d'appels - )

En remarque: La seconde approche ( -for loop - ) est plus rapide (notamment sur les anciens navigateurs) que l'ancien ( -each fonction - ).

9
rubensa

Lorsque vous écrivez un plugin, vous étendez l'objet jQuery, et parce que l'objet jQuery est une séquence, vous retournez this.each(function () { }); pour que votre plugin soit exécuté pour chaque élément de la séquence.

7
Max Toro

En bref, il vous permet de profiter du chaînage, car il retourne tout ce qui a été fait jusqu'à présent afin que la prochaine .anyMethod() puisse agir sur les éléments changés/modifiés.



De plus, jetez un œil à ces liens, ils vous donneront beaucoup d'informations sur le développement de plugins jQuery.

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

Et ici, vous avez une belle application basée sur le Web qui vous aide à démarrer vos plugins jQuery. http://starter.pixelgraphics.us/

4
adardesign