Построение HTML-разметки с использованием метода шаблонов подчеркивания с использованием чистого jquery VS. - PullRequest
Новая
       0

Построение HTML-разметки с использованием метода шаблонов подчеркивания с использованием чистого jquery VS.

2 голосов
/ 03 августа 2011

Я взвешиваю за и против построения определенной разметки двумя способами.Допустим, я хочу создать эту простую HTML-разметку с помощью javascript: 

<li><img data-id="a" src="/src"></li>
<li><img data-id="b" src="/src"></li>
<li><img data-id="c" src="/src"></li>
<li><img data-id="d" src="/src"></li>
<li><img data-id="e" src="/src"></li>

Вы бы предпочли делать это с чистым jQuery, например так: 

$.each(obj, function(key, value) {
    $("<li/>")
    .attr({"data-id":key})
    .append(
        $("<img/>", {
            src: value.pic
        })
    ).addClass("selected")
    .appendTo("document");
})

или вы бы предпочли сделать шаблоннапример, с помощью метода шаблона underscore.js, например, так: 

var listObj = '<% $.each(obj, \
    function(key, value) { %> \
        <li class="selected" data-id= <%= key %> ><img src= <%= value.pic %> ></li> \
    <% }); %>';

$("document")append( _.template(listObj, {obj: obj}) );

Также есть идеи, что быстрее в случаях с большей разметкой и кодом?(Также обратите внимание на отсутствующую подсветку синтаксиса в строке шаблона listObj, что меня немного беспокоит, потому что мой текстовый редактор кода не выделяет синтаксис, потому что считает его строкой)

Ответы [ 2 ]

3 голосов
/ 04 августа 2011

Я бы настоятельно рекомендовал использовать шаблон.

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

Кроме того, некоторые движки шаблонов могут скомпилировать шаблон в простой JavaScript, поэтому нет необходимости разбирать данные (jqote может это сделать, не уверен с подчеркиванием)

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

Я также чувствую, что подход JQuery гораздо менее удобен для обслуживания, кроме простых страниц - если требуются некоторые изменения в макете страницы, может быть очень трудно понять, как генерируется HTML.

1 голос
/ 03 августа 2011

Я думаю, что jQuery будет быстрее, чем шаблонный скрипт, если все будет правильно оптимизировано. У jQuery нет таких больших затрат на создание / добавление объектов DOM. Однако с шаблоном шаблон должен быть полностью проанализирован.

Однако шаблоны могут быть более быстрыми для написания кода и более удобочитаемыми, чем множество вызовов $.each() и .append() s. Вот и весь смысл шаблонов в первую очередь. С другой стороны, мало кто знаком с underscore.js, тогда как есть тысячи разработчиков, использующих jQuery. В этом смысле jQuery может быть более доступным.

...