为什么在jQuery插件中返回this.each(function())?
我已经看到的开发jQuery插件的一些教程和示例往往会返回
this.each(function () { //Plugin code here });
在实例化插件的函数结尾,但我还没有看到任何推理,它似乎是每个人都遵循的标准。 任何人都可以启发我这个做法背后的推理吗?
编辑:澄清我的问题是不是为什么要返回这个,而是为什么插件应该返回this.each。
当使用select器( $('.myclass')
)过滤元素时,它可以匹配多个元素。
each
都迭代所有匹配的元素 ,你的代码被应用到所有的元素上 。
jQuery支持“可链式方法”,这意味着大多数 jQuery函数应该返回this
。 .each()
返回this
,如果你想让$('selector').yourPlugin().css(...)
工作,你应该return this
。
当你写一个插件,你正在扩展jQuery对象,因为jQuery对象是一个序列,你返回this.each(function () { });
这样你的插件就被执行了序列中的每个项目。
让我告诉你两个“等价”的代码片段,可以澄清你的问题:
用jQuery“each”函数:
(function($) { $.fn.mangle = function(options) { return this.each(function() { $(this).append(' - ' + $(this).data('x')); }); }; })(jQuery);
没有jQuery的“每个”function:
(function($) { $.fn.mangle = function(options) { var objs = this; for (var i=0; i<objs.length; i++) { var obj = objs[i]; $(obj).append(' - ' + $(obj).data('x')); }; return this; }; })(jQuery);
所以,基本上, each
函数都被用来将一些代码应用到包含在this
对象中的所有元素( 因为this
通常是指一组由jQueryselect器返回的元素 )并返回引用( 因为each
函数总是返回该引用 -以允许链接电话 )
作为一个方面说明 :第二种方法( – for
循环 )比以前更快(特别是在旧的浏览器上)( – each
函数 )。
简而言之,它允许你利用链接,因为它返回到现在为止所做的一切,所以下一个.anyMethod()
可以对改变/修改的元素进行操作。
另外,看看这些链接,他们会给你很多关于jQuery插件开发的信息。
http://www.webresourcesdepot.com/jquery-plugin-development-10-tutorials-to-get-started/
http://www.learningjquery.com/2007/10/a-plugin-development-pattern
http://snook.ca/archives/javascript/jquery_plugin
在这里你有一个很好的基于networking的应用程序,可以帮助你开始你的jQuery插件。 http://starter.pixelgraphics.us/