Guoyao's Blog 天涯驿站

目前Web前端越来越复杂，Javascript MVC / MVVM思想也开始流行起来。Javascript模板引擎作为数据与界面分离工作中最重要一环，越来越受开发者关注。那么什么是模板引擎？简单点说，模板引擎的功能就是将一个字符串中的待定变量用js对象的对应属性来替换。目前流行的js模板引擎有：Mustache、Underscore、doT、Handlebars、Juicer等。其实要自己实现一个模板引擎并不太困难，其原理都大同小异。接下来就跟着我一步一步来实现一个js模板引擎。

示例模板字符串如下：

<p>Name: <%= this.name %></p>
<p>Age: <%= this.age %></p>

模板引擎处理后的字符串如下：

<p>Name: Guoyao</p>
<p>Age: 27</p>

模板引擎代码如下：

var guiTemplate = (function () {
    function template(tmpl, data) {
        var funcBody = 'var result = "";',
            func;

        tmpl = tmpl.replace(/\r|\n/g, "").replace(/"/g, '\\"'); //转义"号
        funcBody += ' result += "' + tmpl + '";'; 
        funcBody = funcBody.replace(/<%=\s*([^>]*)\s*%>/g, function(match, $1) {
            return '" + ' + $1.replace(/\\"/g, '"') + ' + "'; //替换的同时，恢复<%=%>中被转义的"号
        });

        funcBody += " return result;";

        func = new Function(funcBody);
        return func.call(data);
    }
    return {
      template: template
    };
})();

调用代码如下：

var tmpl = '<p>Name: <%= this.name %></p><p>Age: <%= this.age %></p>';
guiTemplate.template(tmpl, {name: 'Guoyao', age: 27});

至此，我们只是考虑了模板中的输出，没考虑模板中的js逻辑，下一步我们来处理模板中的js逻辑问题。