Наиболее эффективный способ повторного использования элементов, выбранных jQuery

Я могу представить правильный ответ на этот вопрос, основанный на теории, но я просто ищу подтверждение. Мне интересно, какой самый эффективный способ повторного использования элемента, выбранного jQuery. Например:

$('#my_div').css('background','red');
//some other code
$('#my_div').attr('name','Red Div');

против.

myDiv = $('#my_div');
myDiv.css('background','red');
//some other code
myDiv.attr('name','Red Div');

Я предполагаю, что второй пример более эффективен, потому что элемент #my_div не нужно искать более одного раза. Это правильно?

Аналогично, более эффективно сначала сохранить $(this) в varaible, например 'obj', а затем повторно использовать obj, а не использовать $(this) снова и снова? В этом случае jQuery не заставляет искать элемент снова и снова, но он вынужден преобразовать его в объект jQuery [$ (this)]. Итак, как общее правило, должен ли объект jQuery ВСЕГДА быть сохранен в переменной, если он будет использоваться более одного раза?

Ответы

Ответ 1

если вы используете селектор jQuery (like $('#element')), тогда да, вы всегда должны сохранять свои результаты.

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

Ответ 2

Вы должны написать свой код таким образом, чтобы вы ограничивали количество обходов DOM.

Когда вы пишете что-то вроде этого:

$('#my_div').css('background','red');
//some other code
$('#my_div').attr('name','Red Div');

Вы находите #my_div дважды, что неэффективно.

Вы можете улучшить это, назначив результат селектора (т.е. var x = $('.something')) и манипулируя переменной x, или вы можете цепочка вызвать ваш метод следующим образом:

$('#my_div').css('background','red').attr('name','Red Div');

Вы увидите, что вышеупомянутый код используется много, потому что вы находите элемент один раз. Метод css() применит стиль CSS и вернет фактический результат $('#my_div'), поэтому вы можете вызвать другой метод, в данном случае attr().

Мой предпочтительный способ обработки повторного использования селекторов - хранить их как переменную и переносить мои вещи в закрытие.

Ответ 3

Одна вещь, которую я нахожу, вообще игнорируется, - это просто мощные цепочки jQuery. Это может быть не так заметно, но поскольку jQuery кэширует ваши обернутые элементы в цепочке, вы можете изменять элементы, переходить в более конкретное подмножество, изменять, а затем возвращаться в общий суперсет без особых накладных расходов.

Я ожидаю что-то вроде (прошу простить пример)

$('#myDiv')
    .addClass('processing')
    .find('#myInput')
    .hide('slow')
    .end()
    .removeClass('processing')
    ;

чтобы быть лучше по производительности, чем даже

var $myDiv = $('#myDiv').addClass('processing');
var $myInput = $('#myDiv #myInput').hide('slow');
    $myDiv.removeClass('processing');

Ответ 4

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

$('a').click(function(){
  var $this = $(this);
  $this.addClass("clicked");
  $this.attr("clicked", true);
});