jQuery中方法链的缺点和优点是什么？ [关闭]答案

【问题标题】：What are downside and advantage of method chaining in jQuery? [closed]jQuery中方法链的缺点和优点是什么？ [关闭]
【发布时间】：2013-03-06 06:10:25
【问题描述】：

jQuery 中的方法链有什么缺点和优点？

比重新声明选择器快吗？

【问题讨论】：

为了让这个问题更具体：链接而不是什么？
我在第二行说过，与重新声明选择器相反。
i = $('foo'); i.bar(); i.baz(); 怎么样？你考虑这个链接吗？因为这只是链式操作的常用方法。
投票重新开放，但@deceze 是对的，代码示例会改善问题。

标签： jquery method-chaining

【解决方案1】：

最有可能的优点是，

它使您的代码简短且易于管理。它提供了更好的性能（更快）。链条从左到右开始。所以 left most 会先被调用，以此类推。

当使用链接时，JQuery 必须找到元素一次，它会一一执行所有附加的函数。

链接的一个缺点可能是不必要地使用过多，然后会导致性能下降。

例如：- 代码 1：

$(document).ready(function(){
    $('#myContent').addClass('hello');
    $('#myContent').css('color', 'blue');
    $('#myContent').fadeOut('fast');
});

代码 2：

$(document).ready(function(){
    $('#myContent').addClass('hello')
          .css('color', 'blue')
          .fadeOut('fast');     
});

这两个代码都做同样的事情。 Code 2 使用链接，代码更快更短。在代码 1 中，JQuery 必须搜索整个 DOM 以找到元素，然后在其上执行函数。

【讨论】：

我知道你在说什么，但是在第一个例子中说 jQuery“必须搜索整个 DOM”有点误导......在内部 jQuery 只会在这个调用 getElementById() case，这是一个非常快速的操作，尽管它仍然有点像数组查找，所以第二个示例非常快。它会对类选择器和其他更复杂的选择器产生更大的影响，尤其是在较旧的浏览器中。

【解决方案2】：

方法链的优点：

选择器只针对多个操作计算一次。更好的性能，更小的代码。
选择器结果可用于多种方法，而无需将其分配给局部变量。更紧凑的代码。
多个方法可以更紧凑地放在一行中。
当您想要对连续的不同结果（例如$(this).next().find("span.title").closest(".section").hide();）进行操作时，更紧凑。如果没有链接，您将需要四个不同的局部变量，而这不需要。

链接的缺点：

选择器结果未保存在局部变量中，以用于无法仅通过链接完成的更复杂用途。
在一行中塞入太多连续的链接方法可能会影响代码的可读性，如果它扩展为很长的代码行。（仍然可以使用链接，但只是在链接中插入偶尔的换行符以避免这种情况）。

【讨论】：

感谢jfriend的回复

【解决方案3】：

是的，它可以更快，但与将 jQuery 对象存储在一个变量中相比，它的速度一样快。

例如这个：

var elements = $('.myClass').find('p');
elements.next()

应该和这个一样快：

$('.myClass').find('p').next()

大多数时候它归结为可读性...有时方法链接使代码更具可读性，但如果你忘乎所以，它会使它不那么可读性。

【讨论】：

感谢您的回复马特 B。