原生js实现类似于html模板引擎,再也没有比这更快的JS模板引擎：TiniestTpl.js

性能测试图一：1000 次编译 + 100000 次渲染测试

性能测试图二：10000 次编译 + 10000000 次渲染测试

============

方法

tiniestTpl(tpl, data)

返回渲染好的模板内容。

tiniestTpl(tpl)

返回渲染函数。

var tpl = "..." , data = {...};

var render = tiniestTpl(tpl); //渲染函数

var html = render(data); //重复使用

============

语法

字段

类型

值

说明

openTag

String

{%

逻辑语法开始标签

closeTag

String

%}

逻辑语法结束标签

valueTag

String

{%=

输出变量开始标签

valueTag

String

%}

输出变量结束标签

简单的例子

使用原生 javascript 语法编写模板, 变量 data 为模板传入的数据

{% for (var val, i = 0, l = data.list.length; i < l; i ++) { %}

用户: {%=val.user%}/ 网站：{%=val.site%}

{% } %}

var data = {

list: [

{

'user': 'stanley5050',

'site': 'https://blog.51cto.com/12641643'

}

]

};

// 示例一：

var fn = tiniestTpl(document.getElementId('tiniestTpl').innerHtml);

document.getElementId('output').innerHtml = fn(data);

// 示例二：

document.getElementId('output').innerHtml = tiniestTpl(document.getElementId('tiniestTpl').innerHtml, data);

============

源代码

/** tiniestTpl **/

var tiniest = {

'tplCache': {}

};

function tiniestTpl(html, data, fstr = '') {

if (typeof tiniest.tplCache[html] == 'function') {

return data ? tiniest.tplCache[html](data) : tiniest.tplCache[html];

}

let tmp = html.replace(/[\r\n\t]/g, " ").split(/{%/g);

for (let i = 0; i < tmp.length; i++) {

if (tmp[i][0] == '=') {

let end = tmp[i].indexOf('%}');

fstr += "str +=" + tmp[i].substr(1, end - 1) + "+'" + tmp[i].substr(end + 2) + "';";

} else if (tmp[i].lastIndexOf('%}') > 0) {

let end = tmp[i].indexOf('%}');

fstr += tmp[i].substr(0, end - 1) + "str += '" + tmp[i].substr(end + 2) + "';";

} else {

fstr += "str += '" + tmp[i] + "';";

}

}

tiniest.tplCache[html] = eval("func = function(data) { let str=\"\"; " + fstr + " return str; };");

return data ? tiniest.tplCache[html](data) : tiniest.tplCache[html];

}

/** tiniestTpl **/

============

下载

我还不知道怎么上传资料。