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 docs。

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

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

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

Answer 2

如果一切都经过适当优化，我认为jQuery比模板脚本更快。 jQuery没有那么多开发/追加DOM对象的开销。但是使用模板时，必须完全解析模板。

然而，模板编码可能比编写$.each()次调用和.append()的代码更快，编码速度更快。这首先是模板的重点。另一方面，没有多少人熟悉underscore.js，而有数千名开发人员使用jQuery。从这个意义上说，jQuery可能更容易访问。

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

2 个答案: