10

これをjQuery関数に渡すと、実際にDOMで検索されるのではないかと思っていました。質問には特定のコンテキストがあります。

私が持っているとしましょう：

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

jQuery はその関数を提供するために DOM にクエリを実行しますか、それとも JavaScript オブジェクトからすべての情報を読み取って取得しますか?

そして、パフォーマンスの違いは次のとおりです。

$('#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で1回ラップするだけでパフォーマンスが節約されます。jQuery 内に移動して何度もラップするのとは対照的です。それをキャッシュすることは、良いコーディング方法です。

注：もちろん$('#whatever')、DOMを照会する場合は、取得するセレクターを提供しているため、jQueryでラップします。したがって、何度も再利用する場合は、保存することも理にかなっています。var $whatever = $('#whatever');

于 2012-11-15T22:03:55.820 に答える
8

に DOM 要素がある場合、 はthisDOM$(this)を照会しません。その 1 つの 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 に答える