为啥在 jQuery 插件中返回 this.each(function())？

Posted 2023-05-09

【中文标题】为啥在 jQuery 插件中返回 this.each(function())？

【英文标题】：Why return this.each(function()) in jQuery plugins?为什么在 jQuery 插件中返回 this.each(function())？

【发布时间】：2011-02-10 07:32:31

【问题描述】：

我看到的一些开发 jQuery 插件的教程和示例往往会返回

this.each(function () 
    //Plugin code here
);

在实例化插件的函数的末尾，但我还没有看到它背后的任何推理，它似乎是每个人都遵循的标准。谁能告诉我这种做法背后的原因？

编辑：为了澄清，我的问题不是为什么要返回 this，而是为什么插件应该返回 this.each。

【问题讨论】：

这很奇怪。似乎只返回this 会是一个更好的主意..

@Walt W - 我同意。我理解为什么我们会返回这个，因为这与流畅界面的想法保持一致。但我不明白的部分是每次调用。

澄清一下，你写的函数是空白的吗？还是里面有代码？

@Walt w - 不，功能不是空白的，我应该澄清一下。我将更新我的代码示例。

【参考方案1】：

当您使用选择器 ($('.myclass')) 过滤元素时，它可以匹配多个元素。 使用each，您可以遍历所有匹配的元素，并将您的代码应用于所有这些元素。

【讨论】：

当然！谢谢，我想我以前每次使用插件时都认为这是理所当然的。

虽然这绝对正确，但return 的实际原因是允许链接...

@Mef：嗯，我认为这很清楚，更多的是关于为什么使用each。

如果您有想要在 .each() 循环之后运行一次的代码，您可以在循环和最后运行代码之后“返回”吗？

【参考方案2】：

jQuery 支持“链式方法”，这意味着大多数 jQuery 函数应该返回this。 .each() 返回this，如果你想让$('selector').yourPlugin().css(...) 工作，你应该return this。

【讨论】：

这是正确答案。您返回的原因是允许可链接性。

【参考方案3】：

让我向您展示两个“等效”的代码，可以澄清您的问题：

使用 jQuery “each”函数：

(function($) 
    $.fn.mangle = function(options) 
        return this.each(function() 
            $(this).append(' - ' + $(this).data('x'));
        );
    ;
)(jQuery);

没有 jQuery “each” 函数：

(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 通常是指由 jQuery 选择器返回的一组元素 ) 并返回对this 的引用（因为each 函数总是返回该引用-以允许链接调用-）

附注：第二种方法 (-for loop-) 比前一种方法 (-@ 987654329@函数-）。

【参考方案4】：

当您编写插件时，您正在扩展 jQuery 对象，并且由于 jQuery 对象是一个序列，您返回 this.each(function () ); 以便您的插件针对序列的每个项目执行。

【讨论】：

但您实际上只是返回“一个”“这个”，对吗？每个部分都是独立的，不是吗？

@Marcel：是的，实际上你可以调用each，然后返回this，作为两个单独的语句。它之所以有效，是因为 each 也返回 this。

【参考方案5】：

简而言之，它允许您利用链接，因为它返回到目前为止已经完成的所有内容，因此下一个 .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

这里有一个不错的基于 Web 的应用程序，可以帮助您快速启动 jQuery 插件。 http://starter.pixelgraphics.us/