Использует ли $this вместо $(this) обеспечение повышения производительности?

Предположим, что у меня есть следующий пример:

Пример 1

$('.my_Selector_Selected_More_Than_One_Element').each(function() {
    $(this).stuff();
    $(this).moreStuff();
    $(this).otherStuff();
    $(this).herStuff();
    $(this).myStuff();
    $(this).theirStuff();
    $(this).children().each(function(){
        howMuchStuff();
    });
    $(this).tooMuchStuff();
    // Plus just some regular stuff
    $(this).css('display','none');
    $(this).css('font-weight','bold');
    $(this).has('.hisBabiesStuff').css('color','light blue');
    $(this).has('.herBabiesStuff').css('color','pink');
}

Теперь это может быть:

Пример 2

$('.my_Selector_Selected_More_Than_One_Element').each(function() {
    $this = $(this);
    $this.stuff();
    $this.moreStuff();
    $this.otherStuff();
    $this.herStuff();
    $this.myStuff();
    $this.theirStuff();
    $this.children().each(function(){
        howMuchStuff();
    });
    $this.tooMuchStuff();
    // Plus just some regular stuff
    $this.css('display','none');
    $this.css('font-weight','bold');
    $this.has('.hisBabiesStuff').css('color','light blue');
    $this.has('.herBabiesStuff').css('color','pink');
}

Точка - это не фактический код, а использование $(this), когда оно используется более одного раза/два раза/три раза или более.

Мне лучше работать с использованием примера два, чем пример один (может быть, с объяснением почему или почему нет)?

EDIT/NOTE

Я подозреваю, что два лучше одного; то, что я немного боялся, наносил мой код с помощью $this и непреднамеренно вводил потенциально сложную ошибку, когда я неизбежно забывал добавить $this к обработчику событий. Так что я должен использовать var $this = $(this) или $this = $(this) для этого?

Спасибо!

ИЗМЕНИТЬ

Как указывает Скотт, это считается кешированием в jQuery.

http://jquery-howto.blogspot.com/2008/12/caching-in-jquery.html

Джаред

Ответы

Ответ 1

Да, определенно используйте $this.

Новый объект jQuery должен быть создан каждый раз, когда вы используете $(this), а $this хранит один и тот же объект для повторного использования.

A тест производительности показывает, что $(this) значительно медленнее, чем $this. Однако, поскольку обе выполняют миллионы операций в секунду, это вряд ли будет иметь какое-либо реальное влияние, но лучше использовать повторное использование объектов jQuery. Когда возникают реальные последствия для производительности, когда селектор, а не объект DOM, повторно передается в конструктор jQuery - например, $('p').

Что касается использования var, снова всегда используйте var для объявления новых переменных. Таким образом, переменная будет доступна только в функции, в которой она объявлена, и не будет конфликтовать с другими функциями.

Еще лучше, jQuery предназначен для использования с цепочкой, поэтому используйте это, когда это возможно. Вместо того, чтобы объявлять переменную и вызывающие функции на нее несколько раз:

var $this = $(this);
$this.addClass('aClass');
$this.text('Hello');

... объединить функции вместе, чтобы сделать ненужную дополнительную переменную:

$(this).addClass('aClass').text('Hello');

Ответ 2

Перейдите на страницу с jQuery и запустите ее в консоли. Я знаю, что это ужасно, но вы можете видеть, что $выигрывает каждый раз.

var time = new Date().getTime();
$('div').each(function() {
  $(this).addClass('hello');
  $(this).removeClass('hello');
  $(this).addClass('hello');
  $(this).removeClass('hello');
  $(this).addClass('hello');
  $(this).removeClass('hello');
  $(this).addClass('hello');
  $(this).removeClass('hello');
  $(this).addClass('hello');
  $(this).removeClass('hello');
  $(this).addClass('hello');
  $(this).removeClass('hello');
  $(this).addClass('hello');
  $(this).removeClass('hello');
});
var now = new Date().getTime();
console.log(now- time);

var var_time = new Date().getTime();
$('div').each(function() {
  var $this = $(this);
  $this.addClass('hello');
  $this.removeClass('hello');
  $this.addClass('hello');
  $this.removeClass('hello');
  $this.addClass('hello');
  $this.removeClass('hello');
  $this.addClass('hello');
  $this.removeClass('hello');
  $this.addClass('hello');
  $this.removeClass('hello');
  $this.addClass('hello');
  $this.removeClass('hello');
  $this.addClass('hello');
  $this.removeClass('hello');
});
var var_now = new Date().getTime();
console.log(var_now - var_time);

Ответ 3

Да, если вы делаете ссылку на $(это) несколько раз, вы должны хранить ее в переменной. $это просто соглашение, позволяющее другим знать, что $this представляет собой объект jquery.

Это еще более важно, если ваш объект jquery был создан с помощью сложного селектора.

Кроме того, в вашем примере псевдокода вы обычно можете использовать цепочку на $(this).

Пример:

$(this).addClass("someclass").css({"color": "red"});

Ответ 4

@Box9 полностью на месте. Я не могу сказать вам, сколько раз мне приходится реорганизовывать jQuery, пользователи b/c не используют кеширование.

Я бы также добавил, что в сочетании с кэшированием люди должны научиться этому:

var $element = $("#elementId"),
    elementLength = $element.length,
    elementText = $element.text(),
    someString = "someValue",
    someInt = 0,
    someObj = null;

вместо этого:

var $element = $("#elementId");
var elementLength = $element.length;
var elementText = $element.text();
var someString = "someValue";
var someInt = 0;
var someObj = null;