最近做项目用了JS模板引擎渲染HTML,JS模板引擎是在去年做项目是了解到的,但一直没有用,只停留在了解层面,直到这次做项目才用到,JS模板引擎用了两个 BaiduTemplate 和 ArtTemplate。
项目之初用的是BaiduTemplate引擎,项目完成后发布到互联网,发现数据量大时,加载速度慢了点,就考虑换其它模板引擎是否能提高渲染效率,在网上查找、对比后发现ArtTemplate更好一点,就深入了解与学习了下,两个引擎语法有点差别,但结果是一至的,下面具体介绍一下两个引擎的使用情况:
一、BaiduTemplate 下载地址:http://tangram.baidu.com/BaiduTemplate/
二、ArtTempate 下载地址:https://github.com/aui/artTemplate
性能测试 http://cdc.tencent.com/?p=5723
BaiduTemplate 代码引入
<script type="text/javascript"> 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; } }); }); </script>
模板定制
<script id="t:Jtlm_Analysis" type="text/html"> <% for(var i=0;i< list.length;i++){%> <div class="widget-box transparent collapsed"> <div class="widget-header widget-header-flat"> <h6 class="orange"> <a href="/d/d/<%=list[i].Id%>" alt="<%=list[i].Title%>" title="<%=list[i].Title%>" target="_blank"><%=list[i].Title%></a> </h6> <div class="widget-toolbar"> <a href="#" data-action="collapse"> <i class="icon-chevron-up"></i> </a> <a href="#" data-action="close"> <i class="icon-remove"></i> </a> </div> <div class="widget-toolbar"> <a> 发布时间:<%=list[i].UpdateOn%> </a> </div> </div> <div class="widget-body"> <div style="display: block;"> <div class="widget-main"> <p class="alert alert-success"> <%=list[i].Summary%>【<a href="/d/d/<%=list[i].Id%>" target="_blank">详情</a>】 </p> </div> </div> </div> </div> <%}%> </script>
渲染结果
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 模板
<script id="t:layout_8" type="text/html"> <h4>{{title}}<i></i></h4> {{each list as value i}} <dl class="cf"> {{each value.HList as a i}} <dd> <a title="{{a.Title}}" alt="{{a.Title}}" target="_blank" href="/Detail/d/{{a.Id}}"> <img src="{{a.ImgSrc}}" title="{{a.Title}}" alt="{{a.Title}}" /> </a> </dd> <dt> <a target="_blank" href="/Detail/d/{{a.Id}}" title="{{a.Title}}" alt="{{a.Title}}">{{a.Title}}</a> </dt> {{/each}} </dl> <ul> {{each value.List as l i}} <li> {{each l.List as a i}} <a title="{{a.Title}}" alt="{{a.Title}}" target="_blank" href="/Detail/d/{{a.Id}}">{{a.Title}}</a> {{/each}} </li> {{/each}} </ul> {{/each}} </script>
基本遍历模板
多层遍历模板
简单的 if else
Json构造结果
通过对比,ArtTemplate渲染的速度更快一点,对于不经常更新的数据,我们可以采用定时生成Json,通过ArtTemplate引擎进行渲染,这样可以大大提高网站的访问速度,
JS 模板引擎 BaiduTemplate 和 ArtTemplate 对比及应用
时间: 2024-10-12 22:42:58