用纯jQuery制作html标记VS下划线模板方法

我正在权衡通过两种方法构建某种标记的优缺点。可以说，我想用JavaScript创建这个简单的HTML标记：用纯jQuery制作html标记VS下划线模板方法

<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也没有突出显示语法，因为它认为它是一个字符串）

来源

2011-08-03 Hans

我强烈赞成使用模板的争论。

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

此外，一些模板引擎可以编译模板为纯JavaScript，因此不存在解析开销（jqote能做到这一点，不知道下划线）

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

我也觉得JQuery的方法是什么，但琐碎的网页维护的要少得多 - 如果需要在页面布局的一些变化可能很难弄清楚如何生成的HTML。

来源

2011-08-04 05:56:13 Sergey

好吧，听起来没错，但我还不是很满意。如果我想在使用jQuerys数据方法[链接]（http://api.jquery.com/data/）构建标记的同时向dom元素添加一些数据。我不能在模板中做这件事，因为DOM元素只是一个字符串...... – Hans

那么，你可以使用数据属性来存储你的数据。

请参阅您给我的页面上的“HTML 5 data-Attributes”。 – Sergey

是的，我在某些情况下这样做，但如果可能的话，将数据存储在dom中似乎对我来说更加优雅。我想现在的js模板引擎是不可能的......但我仍然在试图找到一种方法，因为那对我来说真的是唯一的缺点。我现在正在研究胡子，但没有找到一个方法。 HTTP：//计算器。com/questions/6977727/mustache-js-how-to-hook-up-data thx for the advice反正 – Hans

我认为jQuery会比一个模板脚本，如果一切都妥善优化。 jQuery没有太多的开销/附加DOM对象的开销。但是，对于模板，模板必须完全解析。

但是，模板的编码速度可能比编号为$.each()的电话和.append()的电话号码更具可读性。首先，这就是模板的重点。另一方面，没有多少人熟悉underscore.js，而有成千上万的开发人员使用jQuery。从这个意义上说，jQuery可能更容易访问。

来源

2011-08-03 01:47:09 tskuzzy

用纯jQuery制作html标记VS下划线模板方法

回答

相关问题