关于artTemplate使用的一点小心得

artTemplate(点击打开链接)是一个Javascript模板引擎。用模板才渲染ajax请求获得的数据，要比用一些操作dom的JsApi优雅一些。性能应该也好很多。

然而我发现使用模板进行一些分支或判断的时候，往往会使模板看起来比较混乱。

例如有如下数据 [ {name:'aaa',status:1} ,{name:'bbb',status:0} ....]

按照官网的示例，模板需要这么写

<span style="white-space:pre"></span><script type="text/html" id="test-ugly-tpl">
{{each com as value index}}
    <span>{{value.name}}</span>
{{if value.status==1}}
    <p>正常</p>
{{else}}
    <p>异常</p>
{{/if}}
{{/each}}
</script>

这还是比较简单的情况，实际使用中可能有多处分支，嵌套分支的情况。

虽然官网上没有写，但是经过本人的试验，发现artTemplate的语法是支持三目运算的

于是可以改进成下列代码

<span style="white-space:pre"></span><script type="text/html" id="test-ok-tpl">
{{each com as value index}}
    <span>{{value.name}}</span>
<p>{{value.status==1?"正常":"异常"}}</p>
{{/each}}
</script>

这样一定程度上使代码的可读性变好了，但是如果是3种或以上的分支，嵌套三目运算又会影响代码的工整性。

于是我想为什么不把数据整理好,再进行模板渲染呢?如

<span style="white-space:pre"></span>for(var i in data){
if(data[i].status==1){
data[i].statusText="正常";
}else{
data[i].statusText="异常";
}
}

那么模板写起来就简单多了，也实现了运算逻辑与视图的分离.

<span style="white-space:pre"></span><script type="text/html" id="test-pretty-tpl">
{{each com as value index}}
    <span>{{value.name}}</span>
<p>{{value.statusText}}</p>
{{/each}}
</script>

但是这样做，在渲染时进行了一次遍历操作，渲染中又进行了一次遍历，可能会使效率变差么？

经过实验，发现用第一种方式渲染300条数据，5-6纳秒。第二种和第三种为2-3纳秒。

测试代码如下：

由此可见，虽然多进行了一次遍历。但渲染遍历的时候工作减少了，效率反而提升了。

所以我推荐在开发过程中，现将需要渲染的数据进行初步的整理，在进行模板渲染的工作。

<span style="white-space:pre"></span>$(function(){

var data ;

$.post(
"someurl",
 someParam,
function(res){
data=res.data;
renderUgly(data);
 renderOk(data);
renderPretty(data); 
}
);

function renderUgly(data){
var start = new Date().getTime();
$('#ugly').html(template('test-ugly-tpl',{com:data}));
var end = new Date().getTime();
console.log("render using ugly:"+(end-start));
}

function renderOk(data){
var start = new Date().getTime();
$('#ok').html(template('test-ok-tpl',{com:data}));
var end = new Date().getTime();
console.log("render using ok:"+(end-start));
}

function renderPretty(data){
var start = new Date().getTime();
for(var i in data){
if(data[i].status==1){
data[i].statusText="正常";
}else{
data[i].statusText="异常";
}
}

$('#pretty').html(template('test-pretty-tpl',{com:data}));
var end = new Date().getTime();
console.log("render using pretty:"+(end-start));

}
});

秒客网

关于artTemplate使用的一点小心得

相关文章