javascript - 将多个 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 的两次调用。

特别要记住，可以有多个事件处理程序分配给同一元素上的同一事件，因此 Hook 事件的插件不一定彼此冲突(除非其中一个在处理过程中停止事件)。

---

下面是两个插件的示例，它们以不冲突的方式作用于匹配的元素集:

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

Live example

现在，如果 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();

});

Live example