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模板引擎的实现原理

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++){+     }