Как ограничить манипулирование DOM в jQuery - добавление элементов

Question

Я следую "лучшим практикам", касающимся темы манипулирования DOM. У меня проблема, хотя. Раньше мой код был:

for(var i=0;i<size;++i){
    var $li = $('<li/>',{some propertie..}).data(some values);
    $ul.append($li);
}

Прочитав несколько советов по производительности, я пришел к выводу, что мне нужно заменить это на:

var str_html = '';
for(var i=0;i<size;++i){
    var li  = '<li ...>...</li>';
    str_html += li;
}
$ul.append(str_html);

У меня вопрос, как я могу добавить параметры данных в этом втором подходе, так же, как я делал в первом (для каждого элемента li)? Спасибо!

Answer 1

Поскольку jQuery 1.4.3, вы можете установить data attributes ^читать . Это будет выглядеть так:

var str_html = '';
for(var i=0;i<size;++i){
   var li  = '<li data-somevalue="foobar">...</li>';
   str_html += li;
}
$ul.append(str_html);

jQuery автоматически вытянет все атрибуты data- в элементы data-expando. Таким образом, вы можете получить доступ к приведенному выше примеру с помощью:

$('li').data('somevalue') // === foobar

На самом деле вы можете вставить любой тип данных в такой атрибут, даже JSON decoded литералы строки объекта (которые автоматически анализируются jQuery):

'<li data-somevalue="{'foo':'Barrrrr'}">...</li>';

переведено на

$('li').data('somevalue').foo // === Barrrr

Answer 2

Взгляните на DocumentFragment (сообщение в блоге написано самим Resig, поэтому в упомянутом шаблонном API, скорее всего, будет использоваться DocumentFragment).

Это лучший способ добавлять элементы DOM без использования innerHTML. Хотя innerHTML почти всегда будет самым быстрым методом.

Если $ ul - это уже существующий элемент в дереве DOM, вы можете ускорить процесс, удалив его из дерева, добавив к нему элементы LI и повторно добавив его. Однако это не гарантирует лучшую производительность: использование инструмента профилирования - единственный способ измерить воздействие.

Answer 3

Я бы посоветовал вам взглянуть на API шаблонов jquery .