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

在我看来，如果元素有类＆＃34; someclass＆＃34;已经附加到另一个插件，一旦这些元素将附加到＆＃34; myplugin＆＃34;，它们将失去与之前连接的插件的原始关系。我不确定我的想法是否完全正确。请告知是否有任何误解。

谢谢！ William Choi

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

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

Answer 2

没有神奇的关系。没有中央注册表或管理单元“属于”任何一个元素或任何一个插件。

Javascript对象只是被黑客攻击的功能;当你“附加一个插件”到一个元素时，你只是调用一些第三方库函数来对该元素做一些事情，并且可能存储一些内部数据来协助整个会话中的动画。

因此，没有任何法律上可以阻止您将多个插件“附加”到同一个元素，但当然它们是否在逻辑上兼容是另一个问题。

将多个jQuery插件附加到单个元素上

2 个答案: