Javascriptで正しい連結アプローチは何ですか？

Question

私はインターネットを検索しました。人々は配列を使用してarr.join（）を実行することを提案しましたが、Firefoxの方が遅いと主張する人もいます。

$.each(data.rows, function (i) { 
     var row = data.rows[i]; 
     var htmlRow = '<div class="colour"><img src="' + row[3] + '" alt="' + row[1] + '" /><span>' + row[1] + '</span> <input type="hidden" value="' + row[4] + '"/></div>'; 

     htmlRow = htmlRow + '<div class="products">'; 
     for (var k = 6; k < row.length; k++) { 

      htmlRow = htmlRow + $('#product').jqote(row[k], '*'); 
     } 
     htmlRow = htmlRow + '</div>'; 
     $('.body-holder').append('<div class="holder">' + htmlRow + '</div>'); 
    }); 

おかげ

Answer 1

ダンは、jQuery Templatesを使用しています。どのくらい強力であるかを理解するのに役立つサンプルコードは次のとおりです。

<!-- SAMPLE TEMPLATE --> 
<script id="myTemplate" type="text/html"> 
    <li class="activity exceptionManager-observation"> 
     <hr /> 
     <table> 
      <tr> 
       <td valign="top"> 
        <img class="icon" src="Includes/Images/symbol_error.png" alt="" border="0" /> 
       </td> 
       <td align="left" valign="top"> 
        <div class="date">${Date}</div> 
        <div class="rank">${ProjectNumber}</div> 
        <div class="message">${Message}</div> 
       </td> 
      </tr> 
     </table> 
    </li> 
</script> 

<script type="javascript">   
var record = {ProjectNumber: '1234', Message: 'This is my rifle! This is my gun!'}; 

/// <summary>Append's a record into the UI.</summary>  
function Append(record) { 
    try { 
     var template = $('#myTemplate').tmpl(record); 
     template.prependTo('#someListInMyPage'); 
    } 
    catch (err) { 
     alert(err); 
    } 
} 
</script> 

Answer 2

私はjqueryのから、このようなtmplなどのテンプレートエンジンを（）使用することをお勧めします。おそらくあなたがやっていることよりも速くないかもしれませんが、パフォーマンスの違いはほんのわずかです。あなたがやっているようにhtmlを構築するその方法はおそらく、適切なテンプレートツールなしでは本当に醜い速さになるでしょう。