资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

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

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

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">详情】                     

                                                <%}%>

渲染结果

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

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}}

渲染结果

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

 

基本遍历模板

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

多层遍历模板

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

简单的 if else

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

Json构造结果

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

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

案例赏析   


名称栏目:JS模板引擎BaiduTemplate和ArtTemplate对比及应用
文章链接:http://cdkjz.cn/article/gdeede.html
多年建站经验

多一份参考,总有益处

联系快上网,免费获得专属《策划方案》及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系

大客户专线   成都:13518219792   座机:028-86922220