zoukankan      html  css  js  c++  java
  • 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模板引擎实例写在回复中,并说说那个模板引擎好。





  • 相关阅读:
    学会Git玩转Github笔记(一)——Github基本概念 & 仓库管理
    Github 入门基本操作
    Struts2拦截器浅析
    SSH(Struts2+Spring4+Hibernate4)框架教程之配置篇
    Spring 体系结构
    Ubuntu启动sshd服务
    jquery ajax/post 请求 案例
    Elasticsearch 配置
    Jenkins安装与配置
    解决Ubuntu环境变量错误导致无法正常登录  (command 'xxx' is available in bin ls)
  • 原文地址:https://www.cnblogs.com/kuikui/p/3087863.html
Copyright © 2011-2022 走看看