将多个jQuery插件附加到单个元素上 [英] Attach multiple jQuery plugins onto a single element

问题描述

根据互联网上的jQuery插件开发指南，开发jQuery插件的常见做法是:

According to the jQuery plugin development guides from the Internet, the common practice of developing a jQuery plugin would be:

(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"，它们将失去与先前附加的插件的原始关系.我不确定我的想法是否完全正确.请告知是否有误解.

It seems to me that, if the elements with class "someclass" have been attached to another plugin, once those elements are going to attach to "myplugin", they will lose the original relationship to the previously attached plugin. I'm not sure if my thinking is completely correct. Please advise if any mis-understood.

谢谢！ 崔小龙

推荐答案

元素未附加"到插件.插件只是向jQuery包装器中添加了用于匹配元素集的其他方法.因此，就像jQuery包装器具有parent和find一样，它也具有插件的myplugin方法.只要不存在命名冲突，这些都可以共存.

An element isn't "attached" to a plug-in. A plug-in just adds further methods to the jQuery wrapper for a matched set of elements. So just as the jQuery wrapper has parent and find, it also has the plug-in's myplugin method. These can all coexist as long as there are no naming conflicts.

的确，如果两个不同的插件都试图同时更改不能同时成为两件事的元素(一个将前景色更改为蓝色"的插件，另一个将前景色更改为红色"的插件) ")，那么如果您在同一个元素集上调用了两个插件方法，它们就会冲突.但这就像两次调用css.

It's true that if two different plug-ins both try to change something about the elements that cannot be two things at once (a plug-in that changes the foreground color to "blue" and another changing the foreground color to "red"), then they'd collide if you called both of the two plug-ins methods on the same element set. But that's just like two calls to css.

尤其要记住，在同一元素上可以有多个事件处理程序分配给同一事件，因此，挂接事件的插件不必彼此冲突(除非其中一个在处理期间停止该事件).

In particular, remember that there can be multiple event handlers assigned to the same event on the same element, so plug-ins that hook events need not necessarily conflict with one another (unless one of them stops the event during handling).

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

Here's an example of two plug-ins that act on the matched set of elements, but in non-conflicting ways:

plugin1.js:

plugin1.js:

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

plugin2.js:

plugin2.js:

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

用法:

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

甚至

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

在线示例

现在，如果foo和bar插件都尝试设置前景色，则稍后调用的那个将获胜.

Now, if both the foo and bar plug-ins tried to set the foreground color, the one called later would win.

这是一对都想处理click事件但以协作方式进行处理的插件的示例:

Here's an example of a pair of plug-ins that both want to handle the click event, but do so in a cooperative way:

plugin1.js:

plugin1.js:

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

plugin2.js:

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

});

在线示例

这篇关于将多个jQuery插件附加到单个元素上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！