js模板引擎

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模板引擎实例写在回复中，并说说那个模板引擎好。

 

 

分类:  javascript

作者： Leo_wl

　　　　

出处： http://www.cnblogs.com/Leo_wl/

　　　　

本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。

版权信息

查看更多关于js模板引擎的详细内容...

声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did45666