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

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

(function($) { $.fn.myplugin = function(options){ //... //Plugin common characteristic //eg 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() { $("
Click received by foo
").appendTo(document.body); }); return this; }; })(jQuery); 

plugin2.js：

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

用法：

 jQuery(function($) { $("#target").foo().bar(); }); 

实例

Answer 2

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

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

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