目前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逻辑问题。