模板引擎原理

模板引擎原理

概念

什么是模板引擎，说的简单点，就是一个字符串中有几个变量待定，通过模板引擎函数把数据塞进去，例如：

var TemplateEngine = function(tpl, data) {
   
    // 模板引擎函数
}
var template = 'Hello, my name is <%name%>. I\\'m <%age%> years old.';
console.log(TemplateEngine(template, {
   
    name: "Jiuto",
    age: 25
}));

我们将会得到"Hello, my name is Jiuto. I’m 25 years old."

实现

通过正则匹配模板中的变量

匹配变量<%...%>的格式，我们声明一个正则表达式/<%([^%>]+)?%>/g。
即，全局匹配以<%开头，%>结尾，[^%>]+为匹配非%>字符集一次或多次，()?为匹配子表达式零次或一次。

正则匹配，我们使用RegExp.prototype.exec()方法

var template = "Hello, my name is <%name%>. I\\'m <%age%> years old.";
var reg = /<%([^%>]+)?%>/g;
while(match = reg.exec(template)) {
   
    console.log(match);
}

此时的模板引擎函数可以写成：

var TemplateEngine = function(tpl, data) {
   
    var reg = /<%([^%>]+)?%>/g