浅谈模板引擎原理及制作

作者: saintkl | 来源:发表于2017-08-04 15:14 被阅读0次

概念：

模板引擎（这里特指用于Web开发的模板引擎）是为了使用户界面与业务数据（内容）分离而产生的，它可以生成特定格式的文档，用于网站的模板引擎就会生成一个标准的HTML文档

使用原因：

前端模板引擎出现之前，在需要用js渲染页面的情况下，我们一般会通过js将数据和生成结构绑定。例如：
var html = "";
for(var i =0;i<data.length;i++){
html+="<li>"+data[i]+"</li>"
}
一旦业务复杂起来，或者多人维护的情况下，几乎会失控。而且如果需要拼接的 HTML 代码里有很多引号的话（比如有大量的 href 属性，src 属性），那么就非常容易出错了。

动手写一个引擎：

参考http://blog.jobbole.com/56689/；
一：从简单的说起（字符串的替换）：
比如：

var template = 'Hello, my name is <%name%>. I\'m <%age%> years old.';
data = { name: "Krasimir", age: 29 }

最终转换为

Hello, my name is Krasimir . I\'m 29 years old.

步骤
1.使用正则查找所有<%属性名%>片段

var re = /<%([^%>]+)?%>/g;//
这句正则表达式会捕获所有以<%开头，以%>结尾的片段;
[^%>] ：^表示非，意为片段中不包含%或者不包含>的部分；
（）为捕获组；

2.将每次得到片段替换为数据中的属性值；

这里使用exec();取得
[0:"<%name%>"//与正则表达式相匹配的文本
1:"name"//捕获组里面的内容
index:21//匹配文本的每次起始位置
input:"Hello, my name is frank. I'm <%age%> years old."//被检索的字符串 string
]

不确定次数的循环操作使用while()

while(match = regex.exec(tpl)) {
      tpl = tpl.replace(match[0], data[match[1]])
          //match[0 ] :循环第一次得出<%name%> ；循环第二次得出<%age%>
          //data[match[1]:循环第一次得出 data['name'] ； 循环第二次得出data['age']
       }

整体代码如下：

var TemplateEngine = function(tpl, data) {
  var regex = /<%([^%>]+)?%>/g; 
        while(match = regex.exec(tpl)) {
            tpl = tpl.replace(match[0], data[match[1]])
        }
        return tpl;
}
TemplateEngine(template, data)

二：通过new Function();将字符转换为js代码
上面的例子我们以data[“property”]的方式使用了一个简单对象来传递数据，但是实际情况下我们很可能需要更复杂的嵌套对象,如果将data改成如下。

eg:data={
    name: "Krasimir Tsonev",
    profile: { age: 29 }
}

在模板中使用<%profile.age%>的话，代码会被替换成data[‘profile.age’]，结果是undefined。这样我们就不能简单地用replace函数，而是要用别的方法。如果能够在<%和%>之间直接使用Javascript代码就最好了。
var template = 'Hello, my name is <%this.name%>. I\'m <%this.profile.age%> years old.';
最终将template转换成js代码为
"Hello, my name is "
+ this.name+
". I\'m "
+this.profile.age+
" years old."
//this.属性名：为这个方法作用域下数据的属性值；
//****注：代码特点为，字符串加引号，非字符即代码运行部分没有引号！！！****

步骤
一、准备前提：new Function("字符串")：

var fun = new Function("a","console.log(a)"); //可以执行字符串内的代码
    fun(1)//1；

此代码相当于
var fun = function(a){
  console.log(a)
}
fun(1)

由此将上述模板转为

var TemplateEngine= function(data){
  return "<p>Hello, my name is "+ this.name+ ". I\'m " +this.profile.age+" years old.</p>"
}
var data={
    name: "Krasimir Tsonev",
    profile: { age: 29 }
}
TemplateEngine.apply(data)//在data的作用域下使用方法TemplateEngine；

最终转为new Function("字符串")的写法为；

var template=  "<p>Hello, my name is <%this.name%>. I\'m <%this.profile.age%> years old.</p>"
var result = new Function(template).apply(data);

二、正式开始：模板用正则替换为js代码：
var template= 'Hello, my name is <%this.name%>. I\'m <%this.profile.age%> years old.'
希望得到模板的js格式为

"<p>Hello, my name is " //字符
+ this.name+//代码
". I\'m "
+this.profile.age+
" years old.</p>"

js格式实现之前的字符效果为（后期通过new Function()转成js代码）

var arr=[];
arr.push("<p>Hello, my name is ");
arr.push(this.name);
arr.push(". I'm ");
arr.push(this.profile.age);
arr.push(" years old.</p>");
return arr.join("")

思路：需要在上述js格式的每行打个隔断，即碰到<%...%>,做个隔断，同时判断若为字符串加引号,，若为js代码直接输出，以下代码用变量code接住所有隔断，用方法add()实现判断js并推入隔断。与此同时需要考虑模板中的引号需要转义，以免影响js效果。
整体代码如下：

  function TemplateEngine(tpl,data) {
       var reg = /<%([^%>]+)?%>/g;
       var code = 'var arr=[];\n', 
            cur=0;      //游标，用来记录查找的位置；
       while(match = reg.exec(tpl)){
           add(tpl.slice(cur,match['index']));   //eg:第一次循环加入arr.push("<p>Hello, my name is ");
           add(match[1],true);//eg:第一次循环加入arr.push(this.name);
           cur=match['index']+match[0].length; // 记录下一次循环，需要截取的起始位置
       }
      //至此截取到最后一个<%this.profile.age%> 
       add(tpl.slice(cur)); // 截取剩余模板剩余部分
       code+="return arr.join(\"\")"; //  由于code在new Function()中，因此需要返回运行代码。
        function add(line ,js) {
            js?code+="arr.push("+line+");\n":
            code+="arr.push(\""+line.replace('\"','\\"')+"\");\n";
        }
        return new Function(code).apply(data);
    }
 var template = '<p>Hello, my name is <%this.name%>. I\'m <%this.profile.age%> years old.</p>';
 var data = {
        name: "lili",
        profile: { age: 30 }
    };
console.log(TemplateEngine(template, data));

模板引擎接近完成了，不过还有一点，我们需要支持更多复杂的语句，比如条件判断和循环。我们接着上面的例子继续写。

var template = 
'My skills:' + 
'<%for(var index in this.skills) {%>' + 
'<a href="#"><%this.skills[index]%></a>' +
'<%}%>';
console.log(TemplateEngine(template, {
    skills: ["js", "html", "css"]
}));

沿用上一个方法，这里会产生一个异常，Uncaught SyntaxError: Unexpected token for。如果我们调试一下，把code变量打印出来，我们就能发现问题所在。

var r=[];
r.push("My skills:");
r.push(for(var index in this.skills) {);
r.push("<a href=\"\">");
r.push(this.skills[index]);
r.push("</a>");
r.push(});
r.push("");
return r.join("");

带有for循环的那一行不应该被直接放到数组里面，而是应该作为脚本的一部分直接运行。所以我们在把内容添加到code变量之前还要多做一个判断。

var re = /<%([^%>]+)?%>/g,
    reExp = /(^( )?(if|for|else|switch|case|break|{|}))(.*)?/g,
    code = 'var r=[];\n',
    cursor = 0;
var add = function(line, js) {
    js? code += line.match(reExp) ? line + '\n' : 'r.push(' + line + ');\n' :
        code += 'r.push("' + line.replace(/"/g, '\\"') + '");\n';
}

这里我们新增加了一个正则表达式。它会判断代码中是否包含if、for、else等等关键字。如果有的话就直接添加到脚本代码中去，否则就添加到数组中去。运行结果如下：

var r=[];
    r.push("My skills:");
for(var index in this.skills) {
    r.push("<a href=\"#\">");
    r.push(this.skills[index]);
    r.push("</a>");
}
r.push("");
return r.join("");

最后一个改进可以使我们的模板引擎更为强大。我们可以直接在模板中使用复杂逻辑，例如：

 var songs =[
        {name:'刚刚好', singer:'薛之谦', url:'http://music.163.com/xxx'},
        {name:'最佳歌手', singer:'许嵩', url:'http://music.163.com/xxx'},
        {name:'初学者', singer:'薛之谦', url:'http://music.163.com/xxx'},
        {name:'绅士', singer:'薛之谦', url:'http://music.163.com/xxx'},
        {name:'我们', singer:'陈伟霆', url:'http://music.163.com/xxx'},
        {name:'画风', singer:'后弦', url:'http://music.163.com/xxx'},
        {name:'We Are One', singer:'郁可唯', url:'http://music.163.com/xxx'}
    ];
    var html =
        '<div class="song-list">'+
        '  <h1>热歌榜</h1>'+
        '  <ol>'+
        '<%for(var i=0; i<this.songs.length;i++){%>'+
        '<li><%this.songs[i].name%> - <%this.songs[i].singer%></li>'+
        '<%}%>'+
        '  </ol>'+
        '</div>';

最终版本代码为

    var TemplateEngine = function(html,options) {
        var re = /<%([^%>]+)?%>/g,
            reExp = /(^( )?(if|for|else|switch|case|break|{|}))(.*)?/g,
            code = 'var Arr=[];\n',
            cursor = 0;
        var add = function(line, js) {
            js? (code += line.match(reExp) ? line + '\n' : 'Arr.push(' + line + ');\n') :
                (code += line != '' ? 'Arr.push("' + line.replace(/"/g, '\\"') + '");\n' : '');
            return add;
        };
        while(match = re.exec(html)) {
            add(html.slice(cursor, match.index));
            add(match[1], true);
            cursor = match.index + match[0].length;
        }
        add(html.substr(cursor, html.length - cursor));
        code += "console.log(this);\n";
        code += 'return Arr.join("");';
        return new Function (code.replace(/[\r\t\n]/g, '')).apply(null,songs);//此处需注意变量songs不是对象，需要将apply(null,songs)加null，变为全局作用域；
    };
 var results =TemplateEngine (html,songs);
document.body.innerHTML = results;

浅谈模板引擎原理及制作

概念：

使用原因：

动手写一个引擎：

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读