$ (This) запрашивает dom?

Мне было интересно, если передать это функции 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');
}

Ответы

Ответ 1

Он не запрашивает DOM в этом экземпляре. $() обертывает this (или что-то еще, что у вас внутри) с объектом оболочки jQuery.

Кэшируя его:

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

Ответ 2

Если у вас есть элемент DOM в this, то $(this) не запрашивает DOM. Он просто помещает объект оболочки jQuery вокруг этого одного элемента DOM.

Это не дорогостоящая операция, но вы хотите избежать ненужного использования. например, вы иногда видите такой код:

$("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, избегайте ненужных вызовов функций и распределения памяти.: -)