自制一个简单的模板引擎

最简版:
var TemplateEngine = function(tpl, data) {
    var regex = /<%([^%>]+)?%>/g;
    while(match = regex.exec(tpl)) {
        tpl = tpl.replace(match[0], data[match[1]])
    }
    return tpl;
}
完成版:
var TemplateEngine = function(html, options) {
    // 捕获所有以<%开头,以%>结尾的片段
    var re = /<%([^%>]+)?%>/g
    // 判断代码中是否包含if、for、else等等关键字。如果有的话就直接添加到脚本代码中去,否则就添加到数组中去
    var reg = /(^( )?(if|for|else|switch|case|break|{|}))(.*)?/g, 
    // 变量code保存了函数体
    var code = 'var r=[];\n', 
    // 当前解析到了模板中的哪个位置。我们需要依靠它来遍历整个模板字符串
    var cursor = 0;
    // 把解析出来的代码行添加到变量code中去。有一个地方需要特别注意,那就是需要把code包含的双引号字符进行转义(escape)
    var add = function(line, js) {
        // 字符串直接push到code,否则就直接添加到脚本中
        js? (code += line.match(reg) ? line + '\n' : 'r.push(' + line + ');\n') :
            (code += line != '' ? 'r.push("' + line.replace(/"/g, '\\"') + '");\n' : '');//将code的“进行转义
        return add;
    }
    while(match = re.exec(html)) {
        // 占位符的内容和一个布尔值一起作为参数传给add函数,用作区分。这样就能生成我们想要的函数体了
        // 执行两次add
        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("");';
    // 设定函数上下文,因此我们需要用this.name
    return new Function(code.replace(/[\r\t\n]/g, '')).apply(options);
}


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

参考链接:只有20行Javascript代码!手把手教你写一个页面模板引擎

推荐阅读更多精彩内容