将多个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”,它们将失去与先前附加的插件的原始关系。 我不确定我的想法是否完全正确。 请告知是否有任何误解。

谢谢! 威廉崔

元素不会“附加”到插件中。 插件只是为jQuery包装器添加了一些匹配元素的方法。 正如jQuery包装器具有parentfind ,它也有插件的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(); 

实例

现在,如果foobar插件都试图设置前景色,那么稍后调用的那个将获胜。


这是一对想要处理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(); }); 

实例

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

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

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