Имеет ли цепочки селекторов jQuery какие-либо негативные последствия?

Question

Есть ли какие-либо негативные последствия для цепочки вызовов API jQuery для селектора? . Негативные последствия, касающиеся производительности, дизайна, восприимчивость к утечкам памяти то, что я особенно заинтересован в

Таким образом, было бы сцепление заявление, например, как это:

$('.myElement').css('color','green') 
       .attr('title','My Element') 
       .click(function(){ console.log('clicked') }); 

Оставить заявку открыта для любого из вышеупомянутые негативные последствия?

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

Answer 1

Chaining на самом деле лучше, чем делать это:

$('.myElement').css('color','green') 
$('.myElement').attr('title','My Element') 
$('.myElement').click(function(){ console.log('clicked') }); 

Поскольку это сделает Jquery «прыжок в бассейн» ищет мой элемент 3 раза, в то время как если вы приковать ваши заказы он будет просто смотреть в бассейн один раз (обратите внимание на пул DOM :)

Answer 2

Цепочка просто вызывает метод для возвращаемого объекта. В этом нет ничего хорошего или плохого. Некоторым нравится, некоторые нет.

---

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

---

Например, если вы сделаете это ...

var jq_obj = $('.my_class').parents('.another_class'); 

... объект JQuery теперь имеет ссылку на предков ".my_class" элементов, которые имеют ".another_class" класс.

Дело в том, что вы можете сделать это ...

jq_obj.end(); 

... и теперь у вас есть ссылки на оригинальные ".my_class" элементов, выбранных. Это означает, что исходные ссылки поддерживались.

---

Так что, если после вызова .parents(), если вы остановились там (не называли .end()), и если вы сохранили глобальную ссылку на этот объект jq_obj, вы теперь имеют неявную ссылку на все ".my_class" элементов в дополнение к ".another_class" элементов.

Как таковой, если какой-либо из исходных элементов ".my_class" удален из DOM, они не могут быть GC'd из-за этой ссылки.

---

Вот пример ...

http://jsfiddle.net/aUEFc/

// select "my_class" then traverse to a parent 
var jq_obj = $('.my_class').parents('.another_class'); 

    // remove "my_class" elements from the DOM 
$('.my_class').remove(); 

    // see if we still have a reference to "my_class" elements 
var len = jq_obj.prevObject.filter('.my_class').length; 

Переменная len будет исходное число ".my_class" элементов, которые были выбраны, даже несмотря на то, ".my_class" элементы были удалены.

Это тот случай, даже если наш объект jq_obj ссылается на элементы ".another_class". Причина в том, что свойство .prevObject ссылается на объект jQuery, который сделал исходный выбор DOM, поэтому узлы никогда не выпускаются до тех пор, пока выживает jq_obj.