再也没有比这更快的JS模板引擎：TiniestTpl.js
16lz
2021-03-25
性能测试图一：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 | %} | 输出变量结束标签 |
============
源代码
/** 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 **/============
下载
我还不知道怎么上传资料。
©著作权归作者所有：来自51CTO博客作者stanley5050的原创作品，如需转载，请与作者联系，否则将追究法律责任更多相关文章
- 你真的明白HTML标签的语义化吗？为什么不能都使用div标签
- html中节点的常用属性和方法
- vscode的使用配置以及markdown常用语法
- 210322 CSS 样式与选择器
- CSS选择器优先级、模块化与伪类选择器的原理及应用
- 选择器的优先级,id,class,tag
- HTML表格与表单的标签与属性
- Spark + ElasticSearch 构建电商用户标签系统实现精准营销
- 初识前端HTML 基础之控件介绍附案例源码