简单实现javascript渲染引擎

发布者: xiaozhimn

最初我的想法是:

var TemplateEngine = function(tpl, data) {

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

期待的输出结果是: <p>Hello, my name is Krasimir. I'm 29 years old.</p>

使用正则表达式来捕捉需要编译的部分的代码片段:

var re = /<%([^%>]+)?%>/g;
while(match = re.exec(tpl)) {
    console.log(match);
}

解释: 使用以上代码可以匹配出所有以 <%开头 以 %>结尾中间的部分。

完善我们的引擎函数,使用replace函数将参数替换到模板中:

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

好了,这样就能跑了,但是还不够好。这里我们以data[“property”]的方式使用了一个简单对象来传递数据,但是实际情况下我们很可能需要更复杂的嵌套对象。所以我们稍微修改了一下data对象:

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

不过直接这样子写的话还不能跑,因为在模板中使用<%profile.age%>的话,代码会被替换成data[‘profile.age’],结果是undefined。这样我们就不能简单地用replace函数,而是要用别的方法。如果能够在<%%>之间直接使用Javascript代码就最好了,这样就能对传入的数据直接求值,像下面这样:

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

你可能会好奇,这是怎么实现的,用了new Function的语法,根据字符串创建一个函数。我们不妨来看个例子:

var fn = new Function("arg", "console.log(arg + 1);");
fn(2); // outputs 3

上面的代码等价于下面的代码:

var fn = function(arg) {
    console.log(arg + 1);
}
fn(2); // outputs 3

按照这个思路我们最后的实现代码如下:

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' : '');
    }
    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:' +
'<%for(var index in this.skills) {%>' +
'<a href="#"><%this.skills[index]%></a>' +
'<%}%>';
console.log(TemplateEngine(template, {
    skills: ["js", "html", "css"]
}));
0赞