10

我想知道是否将它传递给 jQuery 函数实际上会导致它在 DOM 中搜索它。这个问题有一个特定的上下文。

假设我有：

$('#foo').click(function(){
  var id = $(this).attr('id');
  var someVal = $(this).data('someVal');
}

jQuery 会查询 DOM 以提供其功能，还是从 JavaScript 对象 this 读取和获取所有信息？

并且在以下方面是否存在性能差异：

$('#foo').click(function(){
  var elem = $(this);
  var id = elem.attr('id');
  var someVal = elem.data('someVal');
}
4

2 回答 2

10

在这种情况下，它不会查询 DOM。 $()用 jQuery 包装器对象包装this（或您在其中的任何其他内容）。

通过缓存它：

var $this = $(this);
 // you will see code have a $ before or after a variable ( $this, this$, etc )
 // signifying it is a jQuery wrapped object

您只需使用 jQuery 包装一次即可节省性能。而不是让它进入 jQuery 并一遍又一遍地包装它。缓存它是一种很好的编码习惯。

注意：当然，如果你有$('#whatever')它会查询 DOM，因为你已经为它提供了一个选择器来检索它，然后它用 jQuery 包装它。因此，如果您将一遍又一遍地重用它，那么保存它也是有意义的！var $whatever = $('#whatever');

于 2012-11-15T22:03:55.820 回答
8

如果在 中有一个 DOM 元素this，$(this)则不查询 DOM。它只是在那个 DOM 元素周围放置了一个 jQuery 包装器对象。

这不是一项昂贵的操作，但您希望避免不必要地执行此操作。例如，你有时会看到这样的代码：

$("some_selector_here").mousemove(function() {
   if ($(this).hasClass('foo')) {
       $(this).doSomething();
   }
   else {
       $(this).doSomethingElse();
   }
});

只是没有理由这样做。反而：

$("some_selector_here").mousemove(function() {
   var $this = $(this);
   if ($this.hasClass('foo')) {
       $this.doSomething();
   }
   else {
       $this.doSomethingElse();
   }
});

几乎可以肯定，它在处理程序中无关紧要click，尽管我仍然会说它的形式很差。但是在经常被调用的事情中，比如mousemove，好吧，避免不必要的函数调用和内存分配。:-)

于 2012-11-15T22:04:05.590 回答