Зачем возвращать this.each (function ()) в плагинах jQuery? - PullRequest
71 голосов
/ 20 апреля 2010

Некоторые учебники и примеры, которые я видел при разработке плагинов jQuery, имеют тенденцию возвращаться

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

в конце функции, которая создает экземпляр плагина, но я до сих пор не вижу каких-либо аргументов в его пользу, это просто стандарт, которому следуют все. Может ли кто-нибудь просветить меня о причинах этой практики?

Редактировать: Для пояснения мой вопрос был не о том, зачем возвращать это, а скорее, почему плагин должен возвращать this.each.

Ответы [ 5 ]

76 голосов
/ 20 апреля 2010

Когда вы фильтруете элементы с помощью селектора ($('.myclass')), он может соответствовать более чем одному элементу.
С each вы перебираете всех соответствующих элементов , и ваш код применяется ко всем из них.

23 голосов
/ 21 апреля 2010

jQuery поддерживает «цепные методы», что означает, что большинство функций jQuery должны возвращать this. .each() возвращает this, и если вы хотите, чтобы $('selector').yourPlugin().css(...) работал, вы должны return this.

9 голосов
/ 25 ноября 2014

Позвольте мне показать вам два «эквивалентных» фрагмента кода, которые могли бы прояснить ваш вопрос:

С функцией jQuery "каждый":

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

Без jQuery "каждая" функция:

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

Таким образом, в основном, функция each используется для применения некоторого кода ко всем элементам, содержащимся в объекте this ( как this обычно относится к группе элементов, возвращаемых селектором jQuery ) и вернуть ссылку на this (, так как each функция всегда возвращает эту ссылку - чтобы разрешить цепочку вызовов - )

В качестве примечания : Второй подход ( - for loop- ) быстрее (особенно в старых браузерах), чем прежний ( - each функции- ).

7 голосов
/ 21 апреля 2010

Когда вы пишете плагин, вы расширяете объект jQuery, и, поскольку объект jQuery является последовательностью, вы возвращаете this.each(function () { });, так что ваш плагин выполняется для каждого элемента последовательности.

4 голосов
/ 21 апреля 2010

Короче говоря, он позволяет вам использовать преимущества цепочки, поскольку он возвращает все, что было сделано до сих пор, поэтому следующая .anyMethod() может воздействовать на измененные / модифицированные элементы.



Кроме того, взгляните на эти ссылки, они дадут вам много информации о разработке плагинов 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

И здесь у вас есть замечательное веб-приложение, которое поможет вам быстро запустить плагин jQuery. http://starter.pixelgraphics.us/

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...