一个简单的 JavaScript 的模板引擎
比较简单，直接贴代码吧：
(function (global) {
var _version = '1.0.0',
_setting = {
openTag: '<#', /*逻辑代码的开始标签*/
closeTag: '#>', /*逻辑代码的结束标签*/
maskOpenTag: '<!-', /*注释的开始标签*/
maskCloseTag: '-!>' /*注释的结束标签*/
},
_templateCache = {},
_escapeHTML = function (str) {
if (typeof str === 'string') {
var reg = /&(?!#?\w+;)|<|>|"|'|\//g,
rules = { '&': '&', '<': '<', '>': '>', '"': '"', "'": ''', '/': '/' };
return str.replace(reg, function (m) { return rules[m]; });
}
return str;
},
_compile = function (source, key) {
if (typeof key != 'undefined' && typeof _templateCache[key] === 'function') {
return _templateCache[key];
}
var code = (function () {/*剔除注释代码*/
var arr = (source || '').split(_setting.maskOpenTag);
arrayEach(arr, function (i, o) {
var _arr = o.split(_setting.maskCloseTag);
this[i] = _arr.length == 1 ?
(i == 0 ? _arr[0] : _setting.maskOpenTag + _arr[0]) : _arr[1];
});
return arr.join('');
})();
return _templateCache[key] = (function () {
var codeArr = code.split(_setting.openTag),
funArr = [
'var $T = arguments[0];\n',
'var $data = this || { };\n',
'var $escapeHTML = $T.escapeHTML;\n',
'var $htmlArr = [];\n',
'var $write = function() { Array.prototype.push.apply($htmlArr, arguments); };\n'];
arrayEach(codeArr, function (i, o) {
var arr = o.split(_setting.closeTag);
if (arr.length == 1) {
funArr.push(html(arr[0]));
} else {
funArr.push(logic(arr[0]), html(arr[1]));
}
});
funArr.push('return $htmlArr.join("");');
try {
var fun = new Function(funArr.join(''));
} catch (e) {
var fun = new Function('return "Template Error !"');
}
return function () {
try {
return Function.prototype.call.apply(fun, [arguments[0], _t]);
} catch (e) {
return e.name + ' : ' + e.message;
}
};
})();
function arrayEach(arr, fun) {
if (Object.prototype.toString.call(arr) === '[object Array]') {
if (typeof fun === 'function') {
for (var i = 0, len = arr.length; i < len; i++) {
Function.prototype.call.apply(fun, [arr, i, arr[i]]);
}
}
}
}
function html(code) {
code = code
.replace(/"/g, '\\"')
.replace(/\r/g, '\\r')
.replace(/\n/g, '\\n');
return '$write("' + code + '");\n';
}
function logic(code) {
code = code.replace(/^\s+/g, '');
if (code.indexOf('==') === 0) {
return '$write(' + code.substring(2) + ');\n';
} else if (code.indexOf('=') === 0) {
return '$write($escapeHTML(' + code.substring(1) + '));\n';
} else {
return code + '\n';
}
}
},
_t = {
version: _version,
setting: _setting,
templateCache: _templateCache,
escapeHTML: _escapeHTML,
compile: _compile
};
global.T = global.T || {};
for (var it in _t) { global.T[it] = _t[it]; }
})(this);
原理很简单，就是读取模版字符串，用字符串的 split 方法分解字符串然后解析处理，最终生成一个的javascript方法代码，再通过 new Function 创建一个 function
就算编译模版，编译后的模版其实就是一个 function ,这个 function 接收数据参数，下面是个示例：
<script id="t_tmp" type="text/template">
<# if (Object.prototype.toString.call(this) === '[object Array]') { #>
<table>
<# for(var i = 0; i < this.length; i++) { #>
<tr>
<td><#= this[i]['name'] #></td>
<td><#= this[i]['age'] #></td>
</tr>
<# } #>
</table>
<# } #>
</script>
var data = [
{ name: 'xiaoming', age: 23 },
{ name: 'xiaohong', age: 20 }
];
var html = T.compile($('#t_tmp').html(), 't_tmp')(data);
用法也比较简单。