自己实现一个模板引擎

一、一个简单的需求

用js渲染歌曲列表，并且要求不能写死，数据来自一个songs数组。

<div class=song-list>
  <h1>热歌榜</h1>
  <ol>
    <li>刚刚好 - 薛之谦</li>
    <li>最佳歌手 - 许嵩</li>
    <li>初学者 - 薛之谦</li>
    <li>绅士 - 薛之谦</li>
    <li>我门 - 陈伟霆</li>
    <li>画风 - 后弦</li>
    <li>We Are One - 郁可唯</li>
  </ol>
</div>

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'}
]

 

可以想到最笨的两种方法：

1、html字符串拼接

var html = '';
html +='<div class=song-list>';
html +='  <h1>热歌榜</h1>';
html +='  <ol>';
for (var i=0; i<songs.length; i++){
  html +='<li>'+songs[i].name+'-'+songs[i].singer+'</li>';
}
html +='</ol>';
html +='</div>';

document.body.innerHTML = html;

2、构造DOM对象

var elDiv = document.createElement('div');
elDiv.className = 'song-list';
var elH1 = document.createElement('h1');
elH1.appendChild(document.createTextNode('热歌榜'));
var elOl = document.createElement('ol');
for (var i=0; i<songs.length; i++){
  var elLi = document.createElement('li');
  elLi.textContent = songs[i].name + '-' +songs[i].singer;
  elOl.appendChild(elLi);
}
elDiv.appendChild(elH1);
elDiv.appendChild(elOl);

document.body.appendChild(elDiv);

//利用jquery

    var $Div = $('<div class="song-list"></div>');
    var $H1 = $('<h1>热歌榜</h1>');
    var $Ol = $('<ol></ol>');

    for (var i=0; i<songs.length; i++){
      var $Li = $('<li></li>');
      $Li.text(songs[i].name + '-' +songs[i].singer);
      $Ol.append($Li);
      
    }
    $Div.append($H1);
    $Div.append($Ol);

    $('body').append($Div);

我们可以发现这种方式比较繁琐，而且容易出现错误，那有没有方法是可以简化的呢？这时候就创造出了模板引擎的玩意。首先来看看我们的需求

将如下字符串拼接

var li = '<li>' + songs[i].name + ' - ' + songs[i].singer + '</li>'

变成

var li = stringFormat('<li>{0} - {1}</li>', songs[i].name, songs[i].singer)

那我们就可以利用stringFormat函数来格式化字符串，这个函数接收第一个参数是string，其中{0}代表后传入的第一个变量，依次类推

实现这个函数你需要懂得基础的正则表达式和str.replace('',function(){})用法。下面先来看看replace('',function(){})的使用

function stringFormat(str){
  var params = [].slice.call(arguments,1);
  var regex =/\{(\d+)\}/g;
  str = str.replace(regex,function(){
    console.log(arguments);
  })
}

var tpl = '<li>{0} - {1}</li>';
var result = stringFormat(tpl,'刚刚好','薛之谦');

//console

• [ object Arguments ] {
    0 : "{0}" ,
    1 : "0" ,
    2 : 4 ,
    3 : "<li>{0} - {1}</li>"
  }
• [ object Arguments ] {
    0 : "{1}" ,
    1 : "1" ,
    2 : 10 ,
    3 : "<li>{0} - {1}</li>"
  }

我们将replace里的第二个参数函数打印出arguments，可以发现传入的四个参数依次是1、匹配到的需要替换的值，2、正则的分组值，3、匹配到的值在字符串中的位置，4、字符串。接下来我们来完善stringFormat函数

function stringFormat(str){
  //第一点是传入的参数是不确定的，需要利用arguments来取到
  //第二点是我们需要的是arguments的除第一个的参数，可以用到数组的方法slice，但是arguments是类数组对象，所以可以用call来改变函数的执行上下文
  //params是一个参数数组
  var params = [].slice.call(arguments,1);
  //然后我们需要找到{数字}这样格式的字符串，然后将它替换
  var regex =/\{(\d+)\}/g;
  //接下来我们就可以替换了,但是怎么知道找到索引值呢？
  //{数字}，传入的字符串里面的{}里的数字就是对应params数组中的索引，所以我们要想办法把它取出来，可以利用正则中的分组将数字单独取出来
  //接下来可以利用replace的函数arguments[1]取出索引值。
  str = str.replace(regex,function(){
    var index = arguments[1];
    return params[index];
  })
  return str;
}

var tpl = '<li>{0} - {1}</li>';
var result = stringFormat(tpl,'刚刚好','薛之谦');
console.log(result);  //<li>刚刚好 - 薛之谦</li>

这样几行代码简单的模板引擎就实现了，但是这样还不够，我们想要功能更强大的模板函数。需求如下：

var string = 
    '<div class=song-list>' +
    '  <h1>热歌榜</h1>' +
    '  <ol>'
        <%for (var i=0; i<songs.length; i++) {%>
        <li><%songs[i].name%> - <%songs[i].singer%></li>
        <%}%>
      </ol>' +
    '</div>'

var data = {
    songs: songs
}

var result = template(string, data)

document.body.innerHTML = result

在升级版的模板引擎中我们只需要传入template(string,data) 字符串和数据。我们也分步实现，首先实现变量的替换，需求如下;

var template = '<p>Hello, my name is <%name%>. I\'m <%age%> years old.</p>';
var data = {
    name: "Krasimir",
    age: 29
}
console.log(TemplateEngine(template, data)); 

实现变量替换我们需要的仍然是replace和正则的知识，这次用到一个新的api:regex.exec()它的作用是每次只做一次匹配，如果正则表达式没有g，即没有全局匹配，每次调用这个方法时，都是匹配到第一个。如果正则表达式有g，则每次依次匹配，直到没有匹配的返回null，但如果再继续匹配则从第一个匹配项开始循环匹配。

var str ='good,better,wonderful,good';
var reg = /good/;
reg.exec(); //[good]
reg.exec(); //[good]
reg.exec(); //[good]
reg.exec(); //[good]
reg.exec(); //[good]
reg.exec(); //[good]


//全局匹配
var str ='good,better,wonderful,good';
var reg = /good/;
reg.exec(); //[good]  
reg.exec(); //[good]
reg.exec(); //null
reg.exec(); //[good]  
reg.exec(); //[good]
reg.exec(); //null

接下来我们来写出这个变量替换的函数

var TemplateEngine = function(tpl, data) {
    var regex = /<%([^%>]+)?%>/g;
    while(match = regex.exec(tpl)) {
      //将匹配到的与传入的数据进行替换
        tpl = tpl.replace(match[0], data[match[1]]);
    }
    return tpl;
} 
var template = '<p>Hello, my name is <%name%>. I\'m <%age%> years old.</p>';
var data = {
    name: "Krasimir",
    age: 29
}
console.log(TemplateEngine(template, data));

可以看到最重要的是会写正则表达式，并且能够灵活利用。平时可以利用编辑器多练习，sublime中ctrl+h是replace的快捷键。

但是我们会发现如果传入的数据是有嵌套的对象形式，就会出现问题

{
    name: "luoqian",
    profile: { age: 29 }
}

这样你就无法replace为data['profile']，这时候我们想如果能直接运行js代码就好了，如下

var template = '<p>Hello, my name is <%this.name%>. I\'m <%this.profile.age%> years old.</p>';

大神John rege使用了new Function的语法，根据字符串创建一个函数。平时大家用到的都函数表达式和函数声明的方法，下面来看看new Function的用法是怎么样的

 

var fn = new Function('arg','console.log(arg+1)');
fn(3) //4

 

可以看出，创建了一个fn函数，第一个参数为函数的参数，第二个参数为函数体。虽然用这种方法能够解决这样的问题。

var data = {
　　name: "Krasimir", age: 29
}

function fn() {
  return '<p>Hello, my name is ' +this.name+ ' I\'m ' + this.age + ' years old.</p>';
}
fn.call(data); //"<p>Hello, my name is Krasimir I'm 29 years old.</p>"

除此之外，实际的模板引擎中，我们会把模板切分为小段的文本和又意义的js代码。比如一些循环语句。

var template = 
'My skills:' + 
'<%for(var index in this.skills) {%>' + 
'<a href=""><%this.skills[index]%></a>' +
'<%}%>';

这个代码不能直接使用，我们可以把所有的字符串都放在一个数组里，在程序最后把它们拼接起来。

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

有了这些思路就可以尝试写出复杂版的模板引擎函数

var TemplateEngine = function(html, options) {
    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 += line != '' ? 'r.push("' + line.replace(/"/g, '\\"') + '");\n' : '');
        return add;
    }
    while(match = re.exec(html)) {
        add(html.slice(cursor, match.index))(match[1], true);
        cursor = match.index + match[0].length;
    }
    add(html.substr(cursor, html.length - cursor));
    code += 'return r.join("");';
    return new Function(code.replace(/[\r\t\n]/g, '')).apply(options);
}

测试函数

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

这样我们就不用再傻逼的拼接字符串了，TemplateEngine()函数传入两个参数模板1、字符串2、数据

我们在写模板的时候就可以直接用js只需要在语句和变量时加上特殊的标示符<%%>。

 

参考文章：http://blog.jobbole.com/56689/