Всегда использовать селекторы jquery или кэшировать их в переменных?

Question

Селекторы jQuery замечательны, но иногда я набираю их снова и снова, и это немного раздражает.

 $('#mybutton').click(function() {
    $('#message-box').doSomething();
    $('#message-box').doSomethingElse();
    $('#message-box').attr('something', 'something');
 });

Так часто мне нравится кэшировать мои объекты в переменных:

$('#mybutton').click(function() {
    var msg = $('#message-box');
    msg.doSomething();
    msg.doSomethingElse();
    // you get the idea 
});

Есть ли плюсы или минусы между этими двумя паттернами? Иногда кажется, что создание переменных - это дополнительная работа, но иногда это избавляет меня от необходимости печатать. Есть ли какие-то проблемы с памятью, о которых нужно знать? Хорошо ли убираются селекторы после использования, в то время как мои плохие привычки кодирования имеют тенденцию дольше сохранять переменные в памяти?

Это не дает мне спать по ночам, но мне любопытно. Спасибо.

РЕДАКТИРОВАТЬ: Пожалуйста, см. этот вопрос . По сути, он спрашивает об одном и том же, но мне больше нравится ответ.

Answer 1

Вы должны связать их:

$('#mybutton').click(function() {
  $('#message-box').doSomething().doSomethingElse().attr('something', 'something');
 });

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

Answer 2

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

Answer 3

Я говорю, дерзай!

Я делаю то же самое, что и вы.

Это делает мой код более читабельным, что делает меня счастливым.

Answer 4

Pim Jager на 100% подходит для этой конкретной ситуации, но может быть полезно указать, что существуют ситуации, в которых кэширование является более подходящим.

Во-первых, каждый раз, когда вы вызываете $ ('что-то'), вы заново создаете экземпляр всего объекта jQuery, поэтому при выполнении нескольких действий над объектом jQuery вызывается цепочка или кэширование.

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

$('#mybutton').click(function() {
    var msg = $('#message-box');
    msg.doSomething();
    if (msg.hasClass('.something')) {
        msg.dosomethingElse();
    }
});

Интересный ресурс: http://jsperf.com/jquery-chaining-vs-caching

Answer 5

На самом деле вопрос гораздо сложнее.

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

2. Вы можете связать как строки селектора, так и кэшированные селекторы jQuery. Я предполагаю, что использование строк селектора в качестве свойств «this» должно приводить к более медленному, но менее потребляющему ОЗУ коду, а использование кэшированных селекторов - к более быстрому, но более ресурсоемкому коду. Я прав?

Я собираюсь изменить довольно много новых функций function () со строк селектора на кэшированные селекторы, поэтому я спрашиваю.