js模板引擎，哪個好

js模板引擎
模板引擎是為了使用戶界面與業務數據（內容）分離而產生的，它可以生成特定格式的文檔，用於網站的模板引擎就會生成一個標准的HTML文檔。

js模板引擎包括如下：
template
官方參考：http://aui.github.io/artTemplate
BaiduTemplate
官方參考：http://baidufe.github.io/BaiduTemplate
juicer
官方參考：http://juicer.name
doT
官方參考：http://olado.github.io/doT
kissy
官方參考：http://docs.kissyui.com和https://github.com/kissyteam/kissy
mustache
官方參考：https://github.com/janl/mustache.js
等等
具體關於模板引擎的使用方法，請參考官網實例。

現在用template和juicer作為demo展示
1、template的例子

<script id="listtemp" type="text/html">
    <% if(data.length > 0) { %>
        <div>總共<%= total_count %>個數</div>
        <div>
            <% for(var i = 0; i < data.length; i++) { %>
                <div>
                    <%= i + 1 %>、
                    <a href="http://www.baidu.com/s?wd=<%= data[i].user_id %>"><%= data[i].user_name %></a>
                    <div><%= data[i].comment_content %></div>
                    <% if(data[i].average_grade > 3) { %>
                        <div><%= data[i].average_grade %></div>
                    <% } %>
                </div>
            <% } %>
        </div>
    <% } else { %>
        <div>暫無數據</div>
    <% } %>
</script>

<script type="text/javascript">
    var data ={
        total_count:"175",
        data: [{"user_name":"飛天盜","average_grade":"2.0","comment_id":"97180","comment_grade":"1","comment_content":"很好","user_id":"8488867","reply_content":"","up_num":"1","user_avatar":""},{"user_name":"大豐董先生","average_grade":"5.0","comment_id":"97049","comment_grade":"1","comment_content":"質量及做工都非常好，很滿意！","user_id":"39541412","reply_content":"","up_num":"1","user_avatar":""}]
    };
    var html = template.render('listtemp',data);
    document.getElementById('content').innerHTML = html;
</script>

2、juicer例子

<script id="listtemp" type="text/template">
    {@if !!data.length}
        <div>總共${total_count}個數</div>
        <div>
            {@each data as obj,index}
                <div>
                    <a href="http://www.baidu.com/s?wd=${obj.user_id}">${obj.user_name}</a>
                    <div>${obj.comment_content}</div>
                    {@if obj.average_grade > 3}
                        <div>${obj.average_grade}</div>
                    {@/if}
                </div>
            {@/each}
        </div>
    {@else}
        <div>暫無數據</div>
    {@/if}
</script>

<script type="text/javascript">
    var data ={
        total_count:"175",
        data: [{"user_name":"飛天盜","average_grade":"2.0","comment_id":"97180","comment_grade":"1","comment_content":"很好","user_id":"8488867","reply_content":"","up_num":"1","user_avatar":""},{"user_name":"大豐董先生","average_grade":"5.0","comment_id":"97049","comment_grade":"1","comment_content":"質量及做工都非常好，很滿意！","user_id":"39541412","reply_content":"","up_num":"1","user_avatar":""}]
        };
    var listhtml = document.getElementById('listtemp').innerHTML;
    var html = juicer(listhtml,data);
    document.getElementById('content').innerHTML = html;
</script>

 

//數據源
var data ={total_count:"175",data: [{"user_name":"飛天盜","average_grade":"2.0","comment_id":"97180","comment_grade":"1","comment_content":"很好","user_id":"8488867","reply_content":"","up_num":"1","user_avatar":""},{"user_name":"大豐董先生","average_grade":"5.0","comment_id":"97049","comment_grade":"1","comment_content":"質量及做工都非常好，很滿意！","user_id":"39541412","reply_content":"","up_num":"1","user_avatar":""}]};

感興趣的朋友，可以把其他的js模板引擎實例寫在回復中，並說說那個模板引擎好。