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

Question

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

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

Answer 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');     
});​

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

Answer 2

方法链的优点:

1. 选择器对于多个操作只计算一次。性能更好，代码更少。
2. 选择器结果可以用于多个方法，而不必将其分配给局部变量。
3. 多个方法可以更紧凑地放在一行。
4. 更紧凑，特别是当你想对连续不同的结果进行操作时，比如$(this).next().find("span.title").closest(".section").hide();。如果没有链接，您将需要四个不同的局部变量，而this不需要。

链接的缺点:

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

Answer 3

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

。:

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

应该和下面一样快:

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

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