代码之家 › 专栏 › 技术社区 › Bryan M.

是否始终使用jquery选择器或将其缓存在变量中?

performance jquery javascript

Bryan M. · 技术社区 · 17 年前

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 
});

这两种模式之间有什么利弊?有时感觉创建变量是额外的工作,但有时它节省了我的手指大量打字。是否有任何内存问题需要注意?选择器在使用后是否能很好地清理干净,而我糟糕的编码习惯往往会使变量在内存中保留更长的时间?

编辑:请参阅 this question . 它基本上问了同样的问题,但我更喜欢这个答案。

5 回复 | 直到 9 年前

sblundy 17 年前

你应该把它们链接起来:

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

如果您需要一次又一次地执行某些操作,并且函数不返回jQuery对象,那么将它们保存在var中会更快。

Darko 17 年前

neofetter 17 年前

我和你做同样的事。

Dmitriy Sintsov 14 年前

事实上,这个问题要复杂得多。

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

我要将很多新的function()属性从选择器字符串更改为缓存的选择器,这就是为什么我要问这个问题。

Joshua Gruber 13 年前

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

如果你在一个闭包中要做的就是对对象采取行动,那么链接就是你的朋友,而Pim Jager的代码就是你的朋友。但是,如果您要计算该对象的某个部分,您将无法链接这些操作,正如原始海报的第二段代码所示,缓存实际上是一种方法。例如:

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

有趣的资源: http://jsperf.com/jquery-chaining-vs-caching