Прикрепите несколько плагинов jQuery к одному элементу

Question

Согласно руководствам по разработке плагинов jQuery из Интернета, обычной практикой разработки плагинов jQuery будет:

(function($) {
    $.fn.myplugin = function(options){
        //...
        //Plugin common characteristic
        //e.g. default settings
        //...

        //Attach to each desired DOM element
        return this.each(function(){    
            //Instantiation stuff...
        });
    }

})(jQuery);

$(document).ready(function(){
    $(".someclass").myplugin();
})

Мне кажется, что, если элементы с классом "someclass" были присоединены к другому плагину, как только эти элементы будут присоединены к "myplugin", они потеряют первоначальное отношение к ранее подключенному плагину. Я не уверен, что мое мышление полностью правильно. Пожалуйста, сообщите, если что-то неправильно поняли.

Спасибо! Уильям Чой

Answer 1

Элемент не «подключен» к плагину.Плагин просто добавляет дополнительные методы в оболочку jQuery для согласованного набора элементов.Так же, как у jQuery-оболочки есть parent и find, он также имеет метод плагина myplugin.Все они могут сосуществовать, если нет конфликтов имен.

Это правда, что если два разных плагина оба пытаются изменить что-то в элементах, которые не могут быть двумя вещами одновременно (плагин, который меняетцвет переднего плана на «синий», а другой изменяет цвет переднего плана на «красный»), тогда они будут сталкиваться с , если , то вы вызвали оба из двух методов плагинов в одном наборе элементов.Но это так же, как два вызова css.

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

---

Вот пример двух плагинов, которые воздействуют на согласованный набор элементов, но не конфликтующими способами:

plugin1.js:

(function($) {
    $.fn.foo = function() {
        this.css("background-color", "#b00");
        return this;
    };
})(jQuery);

plugin2.js:

(function($) {
    $.fn.bar = function() {
        this.css("color", "white");
        return this;
    };
})(jQuery);

Использование:

$("#target").foo();
$("#target").bar();

или даже

$("#target").foo().bar();

Живой пример

Теперь, если оба плагина foo и bar попытались установить цвет переднего плана, тот, который вызывается позже, победит.

---

Вот пример пары плагинов, которые оба хотят обрабатывать событие click, но делают это совместным образом:

plugin1.js:

(function($) {
    $.fn.foo = function() {
        this.click(function() {
            $("<p>Click received by foo</p>").appendTo(document.body);
        });
        return this;
    };
})(jQuery);

plugin2.js:

(function($) {
    $.fn.bar = function() {
        this.click(function() {
            $("<p>Click received by bar</p>").appendTo(document.body);
        });
        return this;
    };
})(jQuery);

Использование:

jQuery(function($) {

    $("#target").foo().bar();

});

Живой пример

Answer 2

Никаких магических отношений не происходит.Нет центрального реестра или оснасток, которые «принадлежат» какому-либо одному элементу или какому-либо одному плагину.

Объекты Javascript - это просто взломанные функции;когда вы «присоединяете плагин» к элементу, вы просто вызываете какую-то стороннюю библиотечную функцию, которая что-то делает с этим элементом и, возможно, сохраняет некоторые внутренние данные, чтобы помочь с его анимацией на протяжении сеанса.

Так что ничто юридически не мешает вам «подключить» несколько плагинов к одному элементу, хотя, конечно, вопрос о том, будут ли они логически совместимы, - это совсем другой вопрос.