js处理DOM交互非常普遍,但DOM结构单纯用js字符串拼接简直难以维护,不方便理解和扩展。
下面展现了js模板引擎的实现原理:
- html中的模板
<script id="mytpl">
<div>
我的名字是:$name$ <br/>
今年$age$了!
</div>
</script>
因为script不会被浏览器解析和渲染,最大限度节省了浏览器资源,textarea标签同样可以达到效果。Template标签就是这样的目的,只是支持不够良好。
- js模板引擎
String.prototype.simpleTemplate = function(data){
var html = '';
if(Array.isArray(data)){
var self = this;
data.forEach(function(item){
var pattern,
str = self;
Object.keys(item).forEach(function(key){
pattern = new RegExp('\\$'+key+'\\$', 'g');
str = str.replace(pattern, item[key]);
});
html += str;
});
}
return html;
}
为String对象增加引擎方法,这里可以支持变量替换和模板循环生成。
基于这样的思想,可以很方便地扩展成模板内部循环,只要在simpleTemplate内部判断item是否数组类型,将标记的循环部分递归调用simpleTmplate(item)即可。
- 这样使用
var htmlTemplate = $('textarea').val();
var data =[
{
name: '小明',
age: 21,
},
{
name: '小红',
age: 20
}
]
$('body').append($(htmlTemplate.simpleTemplate(data)));
- 支持js语法的原理
如果想使模板支持所有的js语法,需要从头换一种思路。
基本思想是字符串模板在遇到js代码(包括变量)时打散,再拼接时就自动执行了js语法。如template
<p>性别:
if(v){
男
}else {
女
}
</p>
会转换成类似这样:
var html = ‘<p>性别:’ ; if(a){html.push('男');}else{html.push('女')}
开源第三方js模板引擎
早期的Mustache、Hanldebars,流行过的Jade、EJS,easyTemplate等。
当然还有bat各家的:
腾讯的artTemplate 性能优
阿里的jucer 性能优
百度的baiduTemplate