javascript模版引擎-tmpl的bug修复与性能优化
http://www.planeart.cn/?p=1594
http://ejohn.org/blog/javascript-micro-templating
http://bbs.phpchina.com/thread-224712-1-1.html
[ Noevil: 下面直接贴出改进好的MicroTemp,但是还是建议看一下原文,里面有详细的改进细节,和改进前后的性能对比。]
/*** 微型模板引擎 tmpl 0.2** 0.2 更新:* 1. 修复转义字符与id判断的BUG* 2. 放弃低效的 with 语句从而最高提升3.5倍的执行效率* 3. 使用随机内部变量防止与模板变量产生冲突** @author John Resig, Tang Bin* @see http://ejohn.org/blog/javascript-micro-templating/* @name tmpl* @param {String} 模板内容或者装有模板内容的元素ID* @param {Object} 附加的数据* @return {String} 解析好的模板** @example* 方式一:在页面嵌入模板* <script type="text/tmpl" id="tmpl-demo">* <ol title="<%=name%>">* <% for (var i = 0, l = list.length; i < length; i ++) { %>* <li><%=list[i]%></li>* <% } %>* </ol>* </script>* tmpl('tmpl-demo', {name: 'demo data', list: [202, 96, 133, 134]})* * 方式二:直接传入模板:* var demoTmpl =* '<ol title="<%=name%>">'* + '<% for (var i = 0, l = list.length; i < length; i ++) { %>'* + '<li><%=list[i]%></li>'* + '<% } %>'* +'</ol>';* var render = tmpl(demoTmpl);* render({name: 'demo data', list: [202, 96, 133, 134]});* * 这两种方式区别在于第一个会自动缓存编译好的模板,* 而第二种缓存交给外部对象控制,如例二中的 render 变量。*/var tmpl = (function (cache, $) {
return function (str, data) {var fn = !/\s/.test(str)? cache[str] = cache[str]|| tmpl(document.getElementById(str).innerHTML): function (data) {var i, variable = [$], value = [[]];for (i in data) {variable.push(i);value.push(data[i]);};return (new Function(variable, fn.$)).apply(data, value).join("");};fn.$ = fn.$ || $ + ".push('" + str.replace(/\\/g, "\\\\").replace(/[\r\t\n]/g, " ").split("<%").join("\t").replace(/((^|%>)[^\t]*)'/g, "$1\r").replace(/\t=(.*?)%>/g, "',$1,'").split("\t").join("');").split("%>").join($ + ".push('").split("\r").join("\\'")+ "');return " + $;return data ? fn(data) : fn;
}})({}, '$' + (+ new Date));
转载于:https://www.cnblogs.com/noevil/archive/2011/11/19/2255654.html
javascript模版引擎-tmpl的bug修复与性能优化相关推荐
- web前端高级JavaScript - 彻底掌握基于HTTP网络层的“前端性能优化”
彻底掌握基于HTTP网络层的 "前端性能优化" 产品性能优化方案 HTTP网络层优化 代码编译层优化 webpack 代码运行层优化 html/css javascript vue ...
- 前端模版引擎选择指南
Javascript前端模板引擎将数据和结构分离开来,是前端发展路上关键的一环.本文将对比jade,ejs,swig,handlerbars这四种现在常用的模版引擎来为大家提供一些帮助. 语法对比 这 ...
- 高性能JavaScript模板引擎原理解析
来源:http://cdc.tencent.com/?p=5723 随着 web 发展,前端应用变得越来越复杂,基于后端的 javascript(Node.js) 也开始崭露头角,此时 javascr ...
- 高性能JavaScript模板引擎template.js原理解析
点击有惊喜 artTemplate是新一代javascript模板引擎,它在v8中的渲染效率可接近javascript性能极限,在chrome下渲染效率测试中分别是知名引擎Mustache与micro ...
- Swoole 1.8.12 发布,Bug修复版本
PHP的异步.并行.高性能网络通信引擎Swoole 已发布 1.8.12 版本.此版本是一个BUG修复版本,修复了多个细节问题.建议所有用户升级至此版本. 主要更新: 修复SwooleTable在遍历 ...
- Nodejs学习笔记(五)--- Express安装入门与模版引擎ejs
目录 前言 Express简介和安装 运行第一个基于express框架的Web 模版引擎 ejs express项目结构 express项目分析 app.set(name,value) app.use ...
- thymeleaf依赖_玩转SpringBoot集成 Thymeleaf 模版引擎
随着互联网技术的发展,在前后端分离开发模式已经逐渐成为主流的今天,前后端技术的划分也越来越清晰,社会分工进一步细化,职业岗位也更加细分,慢慢开始就有了前端攻城狮和后端攻城狮,技术也进一步细分,出现了以 ...
- IE haslayout的理解与bug修复
要想更好的理解 css, 尤其是 IE 下对 css 的渲染,haslayout 是一个非常有必要彻底弄清楚的概念.大多 IE 下的显示错误,就是源于 haslayout 什么是 haslayout ...
- flowable连线名称不显示bug修复说明
文章目录 flowable连线不显示bug修复说明 flowable连线不显示bug修复说明 在flowable6.4版本(分享牛老师)修复了流程图中连线不显示的bug.由于Flowable官方对于这 ...
最新文章
- Database Connection String
- HDFS EditsLog和FsImage日志机制
- html中视频变圆角,圆形视频和圆角视频的一种实现方式
- 无法监控端口_zabbix 监控远程主机端口
- kubernetes ui 搭建
- IDA 7.0 如何使用 IDAGolangHelper插件
- 使用TensorFlow.js的AI聊天机器人一:检测文本中的情绪
- 解决gcc version 不匹配问题。
- L1-028. 判断素数-PAT团体程序设计天梯赛GPLT
- mysql 相关记录
- java2实用教程第四版pdf下载_Java 2实用教程(第4版)
- Visual Studio2022 离线安装包下载
- 深入探索 Android 网络优化(三、网络优化篇)下
- Geek Challenge
- Win10系统无法安装geforce game ready driver?
- 【有利可图网】PS实战系列:制作树林与文字结合的创意文字效果
- 图像形状上下文特征ShapeContexts
- 据说,年薪百万的程序员,都是这么开悟的
- Android Telephony纲要
- 一、我来说LuCI: LuCI官方----2.UCI
热门文章
- Android Studio --- [学习笔记]Button、TextView、EditText
- es6 --- 使用proxy对数据进行劫持
- 15 错误边界与使用技巧
- [BZOJ3992]序列统计
- Oracle按用户进行统计信息更新
- Java 中参数传递是传值还是引用?
- zoj 3511 Cake Robbery(线段树)
- eclipse定制化配置调优、初始化配置指南、可以解决启动慢等问题
- windwos 批处理重定向, 讲的策彻底
- 在俱乐部首页看不到的团队成员(更新中...)