14行实现js原生语法前端模板引擎
最近开发前端一直用的前端模板引擎;一直使用的 TPPL 模板引擎 源代码如下:
function tppl(tpl, _data) {
tpl = tpl.replace(/(<)/g, "<").replace(/(&)/g, "&").replace(/(>)/g, ">");
var data = _data || {};
if (typeof data !== "object") {
console.log("TEFinal -> data is not jsON Object");
return null;
}
var fn = function(d) {
var i, k = [],
v = [];
for (i in d) {
k.push(i);
v.push(d[i]);
}
return new Function(k, fn.$).apply(d, v);
};
if ( !fn.$ ) {
var tpls = tpl.split(‘<nb>‘);
fn.$ = "var $empty=‘‘; var $reg = RegExp(/object|undefined|function/i); var $=‘‘";
for (var t in tpls) {
var p = tpls[t].split(‘</nb>‘);
if (t != 0) {
fn.$ += ‘=‘ == p[0].charAt(0) ?
"+($reg.test(typeof(" + p[0].substr(1) + "))?$empty:" + p[0].substr(1) + ")" :
";" + p[0].replace(/\r\n/g, ‘‘) + "$=$";
}
fn.$ += "+‘" + p[p.length - 1].replace(/\‘/g, "\\‘").replace(/\r\n/g, ‘\\n‘).replace(/\n/g, ‘\\n‘).replace(/\r/g, ‘\\n‘) + "‘";
}
fn.$ += ";return $;";
}
return data ? fn(data) : fn;
}
vi设计http://www.maiqicn.com 办公资源网站大全https://www.wode007.com
今天突发奇想,考虑到eval()中放入自执行函数,而这个闭包又可以直接访问到外部变量,那么经过整理,终极版的模板引擎出炉,代码如下:
function evalTE (tpl, data) {
tpl = tpl.replace(/^\s+|\s+$/gm, ‘‘).replace(/\r\n/g, ‘‘).replace(/\n/g, ‘‘)
.replace(/\r/g, ‘‘).replace(/(<)/g, ‘<‘).replace(/(&)/g, ‘&‘).replace(/(>)/g, ‘>‘);
var fn = ‘(function(){var $$ = \‘\‘‘,
evals = tpl.split(‘<nb>‘);
for (var t in evals) {
var p = evals[t].split(‘</nb>‘);
if (t != 0) {
fn += ‘=‘ == p[0].charAt(0) ? ‘+‘ + p[0].substr(1) : ‘;‘ + p[0] + ‘$$=$$‘;
}
fn += ‘+\‘‘ + p[p.length - 1] + ‘\‘‘;
}
fn += ‘;return $$; })();‘;
return data ? eval(fn) : fn;
}
通过eval()自执行函数,函数又可以访问到外部的 data 数据; 如果不传需要渲染的数据,那么可以返回该自执行函数字符串。当需要渲染的时候,可以通过eval()或者new Function()来调用