jquery - 用纯jquery构建html标记VS下划线模板方法

Question

我正在权衡通过两种方法构建特定标记的利弊。假设我想用 javascript 创建这个简单的 html 标记:

<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 中缺少的语法突出显示，这让我有点困扰，因为我的代码编辑器 textmate 也没有突出显示语法，因为它认为它是一个字符串)

Answer 1

我强烈主张使用模板。

就性能而言 - 如果您考虑提供的代码示例，我会说模板方法可能很容易比循环中的多个小型 DOM 操作更快。正如模板方法一样，一次分配一大块文本效率更高 - 请参阅 jquery 文档。

此外，一些模板引擎能够将模板编译为纯 JavaScript，因此没有解析开销(jqote 可以做到这一点，不确定下划线)

您可以在单独的文件中编写模板 - 这可以解决语法突出显示的问题，并且一旦您的模板变得比单个列表框更复杂，这就是完全合理的。它还可能减少每个页面需要加载的 JS 量。

我还觉得 JQuery 方法对于除琐碎页面之外的任何内容都不太可维护 - 如果需要对页面布局进行一些更改，则可能很难弄清楚 html 是如何生成的。