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





  • 相关阅读:
    HTML学习基础(一)
    初识C#
    SQL小知识
    jQuery(四)
    jQuery(三)
    认识jQuery(二)
    认识Jquery
    初识Javascript
    初识HTML
    博客,你好!
  • 原文地址:https://www.cnblogs.com/kuikui/p/3087863.html
Copyright © 2020-2023  润新知