自己动手封装一个简易的JavaScript模板

字符串拼接法

在大量使用JavaScript来制作UI时,使用字符串拼接,不仅会造成代码的可读性差,还容易产生错误,例如:

var users=[];
users.push({userName:'james',userAge:30});
users.push({userName:'kelvin',userAge:35});
users.push({userName:'tom',userAge:22});

var res="<table><thead><th>名字</th><th>年龄</th></thead><tbody>";
for(var i=0;i<users.length;i++){
res+="<tr><td>"+users[i].userName+"</td><td>"+users[i].userAge+"</td></tr>";
}
res+="</tbody></table>";
$('#table').html(res);

其中id为table的html:

<div id="table"></div>

上面这种拼接的方式显然不让你满意。

改进一

可以减少拼接的次数,修改为:

var users=[];
users.push({userName:'james',userAge:30});
users.push({userName:'kelvin',userAge:35});
users.push({userName:'tom',userAge:22});

var res="";
for(var i=0;i<users.length;i++){
res+="<tr><td>"+users[i].userName+"</td><td>"+users[i].userAge+"</td></tr>";
}
$('#table').find('tbody').html(res);

id为table的html:

<div id="table">
<table>
<thead>
<th>名字</th>
<th>年龄</th>
</thead>
<tbody></tbody>
</table>
</div>

改进二

可以封装一个模板函数:

function template(tmp){
var result=null;
this.replace=function(reg,newStr){
if(result==null){result=tmp;}
result=result.replace(reg,newStr);
return this;
};
this.getRes=function(){return result;};
}

使用如下:

var users=[];
users.push({userName:'james',userAge:30});
users.push({userName:'kelvin',userAge:35});
users.push({userName:'tom',userAge:22});

var tmpStr="<tr>\
<td>#name#<td>\
<td>#age#</td>\
</tr>";

var res='';
for(var i=0;i<users.length;i++){
var tmp=new template(tmpStr);
tmp.replace(/#name#/,users[i].userName)
.replace(/#age#/,users[i].userAge);
res+=tmp.getRes();
}
$('#table').find('tbody').html(res);

未完待续…

经过两次的改进,比字符串拼接已经好很多了,基本可以用于生产了。但让上面还不够智能,最好还能进一步封装,最后的模板类似:

<div id="table">
<table id="tmp">
<thead>
<th>名字</th>
<th>年龄</th>
</thead>
<tbody>
{%for(var d in data )%}
<tr>
<td>#d.userName#</td>
<td>#d.userAge#</td>
</tr>
{%endfor%}
</tbody>
</table>
</div>

未完待续…

翟前锋 wechat
欢迎订阅我的微信公众号:zhaiqianfeng!