总是使用 jquery 选择器或将它们缓存在变量中？答案

【问题标题】：Always use jquery selectors or cache them in variables?总是使用 jquery 选择器或将它们缓存在变量中？
【发布时间】：2008-11-30 18:21:01
【问题描述】：

jQuery 选择器很棒，但我有时会发现自己一遍又一遍地输入它们，这有点烦人。

 $('#mybutton').click(function() {
    $('#message-box').doSomething();
    $('#message-box').doSomethingElse();
    $('#message-box').attr('something', 'something');
 });

我经常喜欢将我的对象缓存在变量中：

$('#mybutton').click(function() {
    var msg = $('#message-box');
    msg.doSomething();
    msg.doSomethingElse();
    // you get the idea 
});

这两种模式之间有什么优缺点吗？有时感觉创建变量是额外的工作，但有时它为我的手指节省了很多打字时间。是否有任何内存问题需要注意？选择器在使用后是否会很好地清理，而我的不良编码习惯往往会使 var 在内存中保留更长时间？

这不会让我夜不能寐，但我很好奇。谢谢。

编辑：请参阅this question。它本质上问的是同样的事情，但我更喜欢这个答案。

【问题讨论】：

标签： javascript jquery performance

【解决方案1】：

你应该把它们串起来：

$('#mybutton').click(function() {
  $('#message-box').doSomething().doSomethingElse().attr('something', 'something');
 });

如果您需要一遍又一遍地做某事并且函数不返回 jQuery 对象，将它们保存在 var 中会更快。

【讨论】：

这绝对是 jQuery 的做法。
尤其是将它们保存在 var 中并在使用后删除它们可以让您的 ram 使用量下降一点，因为 $('selector') 总是创建一个新对象...

【解决方案2】：

我通常按照 Pims 的回答将它们链接起来，但是有时当需要一次完成很多操作时，链接可能会导致可读性问题。在这些情况下，我将选定的 jQuery 对象缓存在一个变量中。

【讨论】：

【解决方案3】：

我说去吧！

我和你做同样的事情。

它使我的代码更具可读性，这让我很高兴。

【讨论】：

【解决方案4】：

其实这个问题要复杂得多。

链接并不总是可行的，因为选择器字符串或缓存的 jQuery 选择器实例可能存储在新的 function() 属性中，由各种原型函数访问，而不是单个代码。
您可以链接选择器字符串和缓存的 jQuery 选择器。我猜想使用选择器字符串作为“this”属性应该会带来更慢但更少消耗 RAM 的代码，而使用缓存选择器应该带来更快但更消耗 RAM 的代码。我说的对吗？

我即将将很多新的 function() 属性从选择器字符串更改为缓存选择器，这就是我问的原因。

【讨论】：

【解决方案5】：

Pim Jager 对于这种特定情况是 100% 正确的，但指出在某些情况下缓存更合适可能会很有用。

首先，每次调用 $('something') 时，您都在重新实例化整个 jQuery 对象，因此每当您要对 jQuery 对象执行多个操作时，都会调用链接或缓存。

如果您在闭包中要做的只是对对象执行操作，那么链接就是您的朋友，而 Pim Jager 的代码就在现场。但是，如果您要评估该对象的某些部分，您将无法链接这些操作和缓存，正如原始发布者的第二个代码块所示，实际上是要走的路。例如：

$('#mybutton').click(function() {
    var msg = $('#message-box');
    msg.doSomething();
    if (msg.hasClass('.something')) {
        msg.dosomethingElse();
    }
});

有趣的资源：@987654321@

【讨论】：