JavaScript模板引擎原理，几行代码的事

一、前言

什么是模板引擎，说简单点，就是一个字符串有几个变量待定。比如：

var tpl="Hei,my name is <%name%>,and I\'m <%age%> years old.";

通过模板殷勤函数把数据塞进去，

var data={
"name":"Miya Bai",
"age":"20"
};
var result=tplEngine(tpl,data);
//Hei,my name is Barret Lee,and I'm 20 years old.

那这玩意有什么作用呢？其实他就是一个预处理器（processor）,搞php开发的童鞋对Smarty必然熟悉，Smarty是一个php模板殷勤，tpl中待处理的字符通过数据匹配然后输出相应的html代码，加之比较给力的缓存技术，其速度和易用性是非常给力的！JS Template也是一样的，我们的数据库里保存着数以千万计的数据，而每一条数据都是通过同一种方式输入，就拿上面的例子来说，我们不可能在数据库里存几千条”Hei,my name…”,而是只保存对应的name和age，通过模板输出结果。

JS模板引擎应该做哪些事情？看看下面一串代码：

var tpl='<%for(var i=0;i<this.posts.length;i++){'+
'var post=post[i];%>'+
'<% if(!post.expert){ %>'+
'<span>post is null</span>'+
'<% } else { %>'+
'<a href="#"><% post.expert %> at <%  post.time %></a>'+
'<% } %>'+
'<% } %>'

一个基本的模板殷勤至少可以保证上面的代码可以正常解析，如送入数据是：

var data={
posts:[
{
"expert":"content1",
"time":"yesterday"
},
{
"expert":"content2",
"time":"today"
},
{
"expert":"content 3",
"time":"tomorrow"
},{
"expert":"",
"time":"eee"
}
]
};

可以输出：

<a href="#">content 1 at yesterday</a>
<a href="#">content 2 at today</a>
<a href="#">content 3 at tomorrow</a>
<span>post is null</span>

先戳这个demo看看。

下面就具体说说这个模板殷勤的原理是啥样的。

二、JS模板引擎的实现原理

a35f
1.正则抠出要匹配的内容

针对这一串代码，通过正则获取内容

var tpl="Hei,my name is <%name%>,and I\'m <% age %> years old."
var data={
"name":"Barret Lee"，
"age":"20"
};

最简单的方式就是通过replace函数了：

var result=tpl.replace(/<%([^%>]+)%>/g,function(s0,s1){
return data[s1];
})

通过正则替换，我们很轻松的拿到了result，你可以去试试，他正式我们想要的结果。但是这里又有了一个问题，改一下data和tpl，

var tpl="Hei,my name is <% name %>,and I\'m <% info.age %> years old";
var data={
"name":"Barret Lee",
"info":{"age":20}
};

再用上面的方式去获取结果，呵呵，不行了吧~这里[“info.age”]本身就是undefined，所以我们需要换一种方式来处理这个问题，那就是将它转换成真正的JS代码。如：

return 'Hei,my name is '+data.name+', and I\'m'+data.info.age+'years old.'

但是接着又有一个问题来了，当我们的代码中出现for循环和if的时候，上面的转换明显是不起作用的，如：

var tpl='Posts:'+
'<% for(var i=0;i<post.length;i++){'+
'<a href="#"><% post[i].expert %></a>'+
'<% } %>'

如果继续采用上面的代码，得到的结果便是：

return 'Posts: '+
for(var i=0;i<post.length;i++){+
}