用純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下劃線模板方法

回答

相關問題