純粋なjqueryを使ったhtmlマークアップVSアンダースコアテンプレートメソッド

Question

私は、2つの方法で特定のマークアップを構築する際の長所と短所を比較しています。 は、私は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})); 

また、どのようなアイデアは、より多くのマークアップとコードの場合に速いですか？ （また、それは、その文字列を考えているので、また、私のコードエディタTextMateは構文を強調doesntのため、私は少し気にテンプレート文字列listObj、でハイライト表示欠落している構文を気づか）

Answer 1

テンプレートを使用することを強く主張します。

パフォーマンス面で - 提供されたコードサンプルを考慮すると、テンプレートアプローチは、ループ内の複数の小さなDOM manupulationよりも速くなることが容易にわかると思います。テンプレートアプローチのように、一度に大きなテキストブロックを割り当てることはずっと効率的です - jqueryドキュメントを参照してください。あなたは別のファイルにテンプレートをコーディングすることができ

（jqoteはこれではなく、アンダースコアについて確認を行うことができます）

はまた、いくつかのテンプレートエンジンは、プレーンはJavaScriptにテンプレートをコンパイルすることができますので、何の構文解析のオーバーヘッドはありません - これは構文の強調表示の問題を解決し、テンプレートが単一のリストボックスより複雑になると完全に正当化されます。また、ページごとにロードする必要のあるJSの量を減らすこともできます。

また、JQueryのアプローチは、些細なページ以外は何のメンテナンスも難しいと感じています。ページレイアウトの変更が必要な場合は、htmlの生成方法を理解するのが非常に難しいかもしれません。

Answer 2

私はjQueryのより速いだろうと思うだろうすべてが適切に最適化されている場合、テンプレートスクリプト。 jQueryには、DOMオブジェクトを作成/追加するためのオーバーヘッドはあまりありません。ただし、テンプレートでは、テンプレートを完全に解析する必要があります。

しかし、テンプレートは、$.each()コールと.append()のロットを持つよりも素早くコード化して読みやすくすることができます。それが最初の場所のテンプレートの全体のポイントです。反対に、多くの人がunderscore.jsに精通している人はあまりいませんが、jQueryを使用している開発者は何千人もいます。その意味で、jQueryはよりアクセスしやすくなるかもしれません。