链接 jQuery 选择器是否有任何负面影响？答案

【问题标题】：Does chaining jQuery selectors have any negative effects?链接 jQuery 选择器是否有任何负面影响？
【发布时间】：2012-04-20 18:41:55
【问题描述】：

在选择器上链接 jQuery API 调用是否有任何负面影响？处理性能、设计、内存泄漏敏感性的负面影响是我特别感兴趣的。

所以，将这样的语句链接起来：

$('.myElement').css('color','green')
               .attr('title','My Element')
               .click(function(){ console.log('clicked') });

让应用程序面临上述任何负面影响？

我个人对链接 jQuery 表达式完全没有任何问题，但是我看到很多人 bash 链接，我想知道避免它是否有任何具体的好处，或者这只是一个问题可读性和个人风格。

【问题讨论】：

除了设计，我看不出它如何受到语法的影响，您询问的其他负面影响似乎只是作为特定的解释器实现弱点才有可能。
"很多人 bash 链接" => 参考？
在我的工作中，我最近也在这里看到了一些例子。我会看看我能不能把它们挖出来，一个肯定是最近的一个赏金问题，回答者告诉提问者“退出链接，这就是时髦的编码方式，可能是你遇到问题的原因”:)
链接是 JQuery 的主要优势之一……如果您使用 JQuery，我看不出为什么不应该链接。我认为这更像是对 JQuery 的抨击，这是有道理的。
问题不在于 jQuery 的链接。它与 jQuery 本身有关，它是 flawed，并且平均会产生一个数量级的性能损失。

标签： jquery performance jquery-selectors chaining

【解决方案1】：

链接实际上比这样做更好：

$('.myElement').css('color','green')
$('.myElement').attr('title','My Element')
$('.myElement').click(function(){ console.log('clicked') });

因为这样做会使 jquery '跳转到池中'查找我的元素 3 次，而如果您将订单链接起来，它只会在池中查找一次（注意池是 DOM :)

【讨论】：

是的，链接比你的例子更好，但你暗示如果不链接，你必须做冗余的 DOM 选择，事实并非如此。

【解决方案2】：

链接只是在返回的对象上调用一个方法。本质上没有什么好或坏的。有人喜欢，有人不喜欢。

关于内存泄漏，当您完成 DOM 遍历时，jQuery 会保留一组缓存的 jQuery 对象。这与链接并没有太大关系，因为引用的 jQuery 对象会做同样的事情，但我想如果你保留对该对象的永久引用，它可能会导致泄漏。

例如，如果你这样做......

var jq_obj = $('.my_class').parents('.another_class');

...jQuery 对象现在具有对具有 ".another_class" 类的 ".my_class" 元素的祖先的引用。

问题是你可以这样做......

jq_obj.end();

...您现在可以引用所选的原始".my_class" 元素。这意味着保留了原始参考。

所以如果在调用.parents() 之后，如果你停在那里（没有调用.end()），并且如果你保持对那个jq_obj 对象的全局引用，你现在应该除了 ".another_class" 元素之外，还有对所有 ".my_class" 元素的隐式引用。

因此，如果任何原始 ".my_class" 元素从 DOM 中删除，它们就不能因为该引用而被 GC。

这是一个例子......

http://jsfiddle.net/aUEFc/

   // select "my_class" then traverse to a parent
var jq_obj = $('.my_class').parents('.another_class');

   // remove "my_class" elements from the DOM
$('.my_class').remove();

   // see if we still have a reference to "my_class" elements
var len = jq_obj.prevObject.filter('.my_class').length;

len 变量将是 ".my_class" 元素的原始数量，即使 ".my_class" 元素已被删除。

即使我们的jq_obj 对象引用".another_class" 元素也是如此。原因是 .prevObject 属性引用了进行原始 DOM 选择的 jQuery 对象，因此只要 jq_obj 存在，节点就永远不会释放。

【讨论】：