13518219792

NEWS

网站建设资讯

JS模板引擎BaiduTemplate和ArtTemplate对比及应用

     最近做项目用了JS模板引擎渲染HTML，JS模板引擎是在去年做项目是了解到的，但一直没有用，只停留在了解层面，直到这次做项目才用到，JS模板引擎用了两个 BaiduTemplate 和 ArtTemplate。

创新互联-专业网站定制、快速模板网站建设、高性价比武安网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式武安网站制作公司更省心,省钱,快速模板网站建设找我们，业务覆盖武安地区。费用合理售后完善，十多年实体公司更值得信赖。

     项目之初用的是BaiduTemplate引擎，项目完成后发布到互联网，发现数据量大时，加载速度慢了点，就考虑换其它模板引擎是否能提高渲染效率，在网上查找、对比后发现ArtTemplate更好一点，就深入了解与学习了下，两个引擎语法有点差别，但结果是一至的，下面具体介绍一下两个引擎的使用情况：

一、BaiduTemplate 下载地址：http://tangram.baidu.com/BaiduTemplate/

二、ArtTempate 下载地址：https://github.com/aui/artTemplate

 

性能测试 http://cdc.tencent.com/?p=5723

BaiduTemplate 代码引入

    var html;
    var bt = baidu.template;
    $(function () {
        $.ajax({
            type: "GET",
            url: "/Json/Analysis.js",
            dataType: 'json',
            success: function (data) {
                html = bt('t:Jtlm_Analysis', {
                    list: data
                });
                document.getElementById('Jtlm_Analysis').innerHTML = html;
            }
        });
    });

模板定制

    <% for(var i=0;i< list.length;i++){%>
    
        
            
                " alt="<%=list[i].Title%>" title="<%=list[i].Title%>" target="_blank"><%=list[i].Title%>
            
            
                
                    
                
                
                    
                
            

                                                  发布时间：<%=list[i].UpdateOn%>                              

        

                                                                                    <%=list[i].Summary%>【" target="_blank">详情】                     

                

渲染结果

ArtTemplate 代码引入

$.ajax({
            type: "GET",
            url: "Json/HomeJsonFirst.js?r=" + Math.random(),
            dataType: 'json',
            success: function (data) {
                //Tab 切换
                html = template('t:layout_2', {
                    list: data.Layout_2
                });
                document.getElementById('layout_2').innerHTML = html;
                //看点
                html = template('t:layout_6', {
                    title: JLConsts.Group_Layout_6_Name,
                    list: data.Layout_6
                });
                document.getElementById('layout_6').innerHTML = html;
                //开心一刻
                html = template('t:layout_7', {
                    title: JLConsts.Group_Layout_7_Name,
                    list: data.Layout_7
                });

ArtTemplate 模板

    
`title`
    {{each list as value i}}
    
        {{each value.HList as a i}}
        

            
                
            
        
        

            `a`.`Title`
        
        {{/each}}
    
    

        {{each value.List as l i}}
        

            {{each l.List as a i}}
            `a`.`Title`
            {{/each}}
        
        {{/each}}
    
    {{/each}}

渲染结果

基本遍历模板

多层遍历模板

简单的 if else

Json构造结果

通过对比，ArtTemplate渲染的速度更快一点，对于不经常更新的数据，我们可以采用定时生成Json，通过ArtTemplate引擎进行渲染，这样可以大大提高网站的访问速度，

案例赏析