Как правильно работать с объектами при помощи jquery?

Question

[Иван Иванов]

Здравствуйте, дорогие друзья. Снова задаю глупый вопрос, но к сожалению гугл не даёт мне конкретного ответа. А поскольку тут гораздо больше опытных специалистов, чем где бы то ни было, то пишу именно сюда. Вопрос простейший, но не дающий мне покоя с самого начала изучения программирования.

Итак представим что мы имеем объект

<div class="house-room" id="room-1" data-square="14.2"></div>

Далее при помощи нашего любимого jquery я хочу поработать с данным объектом. Например представим, что я хочу в данный div добавить какую-либо разметку с текстом и поменять фон. Для этого я знаю два способа:

// Способ первый
var curEl = $("#room-1"); // создать переменную, по которой мы будем обращаться к свойствам объекта
curEl.css('background', '#000000'); //меняем фон
curEl.append('Комната имеет общую площадь 100м<sup>2<sup>'); // добавляем текст с разметкой в наш объект

// Способ второй 
$("#room-1").css('background', '#000000'); //меняем фон
$("#room-1").append('Комната имеет общую площадь 100м<sup>2<sup>'); /* без создания переменной,
 сразу писать в одну строку. */

Внимание вопрос!

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

ps. Конечно я понимаю, что данный вопрос на работоспособность кода в данном случае не повлияет, но почему же меня это так беспокоит? Однажды мне один человек сказал "Не плоди сущности, там где это не нужно". Вот теперь меня и мучает, не является наш первый способ, как раз тем самым "Плодением сущностей". Очень хочется изначально учиться писать правильно, что бы потом не пришлось с душевными муками переучиваться. Спасибо за понимание, надеюсь получить грамотный ответ. Ссылки с информацией на объяснение подобных нюансов приветствуются.

Answer 1

[tyzberd]

можно сделать так

$("#room-1").css('background', '#000000').append('Комната имеет общую площадь 100м<sup>2<sup>');

переменную создавать когда используете нужный блок несколько раз.
если на следующей строке вам нужен блок вложенный в #room-1, можно воспользоватся find

Comments

[Иван Иванов]

Можно поподробней по find не совсем понял. Про Одну строку, очень здорово вы написали, возьму на вооружение.

[tyzberd]

<div class="house-room" id="room-1" data-square="14.2">
  <div class="house-room-item">1</div>
  <div class="house-room-item">2</div>
</div>

var curEl = $("#room-1"); 
curEl.css('background', '#000000');
curEl.find('.house-room-item').css('color', '#ffffff');

[tyzberd]

то же самое с .prev(), .next(), .parents и т.д

[Иван Иванов]

tyzberd, Спасибо теперь догнал )) Тоесть я правильно понимаю, что^

curEl.find('.house-room-item').css('color', '#ffffff');

// Будет лучше чем 
$('.house-room-item').css('color', '#ffffff');

[tyzberd]

да

[Dima Polos]

Иван Иванов, поделюсь с вами шпаргалкой, которой сам пользуюсь: jquery.page2page.ru/p2p/ifr.html
Посмотрите функции .parents,, .find, разберитесь с фильтрами, и тогда будет намного легче.

[tyzberd]

по поводу переменных, можно посмотреть код на github
https://github.com/cosmefae/jquery-minimalist-coll...
https://github.com/vctrfrnndz/jquery-accordion/blo...

Answer 2

[Андрей Малиновский]

Нет повторного поиска по DOM и если это не id, а более сложный селектор, имеем прирост в скорости скрипта.
Ну и ситуация играет роль, если селектор используется более одного раза я создаю переменную.
Эти два действия можно было сделать в одну строку.

Comments

[Иван Иванов]

То есть, если бы я обращался к объекту по классу, то вариант с переменной даст прирост к скорости выполнения скрипта?
И еще, я правильно понимаю, что в случае когда мы отказываемся от использования переменной и используем селектор больше одного раза, это приведет к понижения производительности ( пусть в данном случае и не большой ), а связанно это будет с тем, что обращение по селектору, будет каждый раз искать объект в DOM? Если я правильно понял, то при создании переменной, объект в DOM мы будем искать только один раз. Или я не так что-то понял?

[Николай Шабалин]

Иван Иванов, вы все правильно поняли, сохраняя в переменную вы сокращаете количество поисков по DOM, чем меньше вы его трогаете, тем лучше.

[Иван Иванов]

Николай Шабалин, Благодарю вас )