jquery - jQuery 中方法链的缺点和优点是什么？

Question

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

它比重新声明选择器更快吗？

Answer 1

方法链的优点：

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

链式的缺点：

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

Answer 2

最有可能的优点是，

它使您的代码简短且易于管理。它提供了更好的性能（更快）。链条从左到右开始。所以 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 以找到元素，然后在其上执行函数。

Answer 3

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

例如这个：

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

应该和这个一样快：

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

大多数情况下，它归结为可读性……有时方法链接使代码更具可读性，但如果你忘乎所以，它会使它的可读性降低。