Самый эффективный способ повторно использовать выбранные jQuery элементы

Question

Я могу представить правильный ответ на этот вопрос, основываясь на теории, но я просто ищу подтверждение. Мне интересно, каков наиболее эффективный способ повторно использовать элемент, выбранный 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) в переменной, например obj, а затем повторно использовать obj вместо использования $ (this) снова и снова? В этом случае jQuery не заставляют искать элемент снова и снова, но он вынужден конвертировать это в объект jQuery [$ (this)]. Итак, как общее практическое правило, должен ли объект jQuery ВСЕГДА храниться в переменной, если он будет использоваться более одного раза?

Answer 1

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

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

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

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

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

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

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

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

Answer 2

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

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

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

Answer 4

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

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