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

$.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 });

`title`

`a`.`Title`

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

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

`title`

其他资讯