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修复与性能优化相关推荐

  1. web前端高级JavaScript - 彻底掌握基于HTTP网络层的“前端性能优化”

    彻底掌握基于HTTP网络层的 "前端性能优化" 产品性能优化方案 HTTP网络层优化 代码编译层优化 webpack 代码运行层优化 html/css javascript vue ...

  2. 前端模版引擎选择指南

    Javascript前端模板引擎将数据和结构分离开来,是前端发展路上关键的一环.本文将对比jade,ejs,swig,handlerbars这四种现在常用的模版引擎来为大家提供一些帮助. 语法对比 这 ...

  3. 高性能JavaScript模板引擎原理解析

    来源:http://cdc.tencent.com/?p=5723 随着 web 发展,前端应用变得越来越复杂,基于后端的 javascript(Node.js) 也开始崭露头角,此时 javascr ...

  4. 高性能JavaScript模板引擎template.js原理解析

    点击有惊喜 artTemplate是新一代javascript模板引擎,它在v8中的渲染效率可接近javascript性能极限,在chrome下渲染效率测试中分别是知名引擎Mustache与micro ...

  5. Swoole 1.8.12 发布,Bug修复版本

    PHP的异步.并行.高性能网络通信引擎Swoole 已发布 1.8.12 版本.此版本是一个BUG修复版本,修复了多个细节问题.建议所有用户升级至此版本. 主要更新: 修复SwooleTable在遍历 ...

  6. Nodejs学习笔记(五)--- Express安装入门与模版引擎ejs

    目录 前言 Express简介和安装 运行第一个基于express框架的Web 模版引擎 ejs express项目结构 express项目分析 app.set(name,value) app.use ...

  7. thymeleaf依赖_玩转SpringBoot集成 Thymeleaf 模版引擎

    随着互联网技术的发展,在前后端分离开发模式已经逐渐成为主流的今天,前后端技术的划分也越来越清晰,社会分工进一步细化,职业岗位也更加细分,慢慢开始就有了前端攻城狮和后端攻城狮,技术也进一步细分,出现了以 ...

  8. IE haslayout的理解与bug修复

    要想更好的理解 css, 尤其是 IE 下对 css 的渲染,haslayout 是一个非常有必要彻底弄清楚的概念.大多 IE 下的显示错误,就是源于 haslayout 什么是 haslayout ...

  9. flowable连线名称不显示bug修复说明

    文章目录 flowable连线不显示bug修复说明 flowable连线不显示bug修复说明 在flowable6.4版本(分享牛老师)修复了流程图中连线不显示的bug.由于Flowable官方对于这 ...

最新文章

  1. Database Connection String
  2. HDFS EditsLog和FsImage日志机制
  3. html中视频变圆角,圆形视频和圆角视频的一种实现方式
  4. 无法监控端口_zabbix 监控远程主机端口
  5. kubernetes ui 搭建
  6. IDA 7.0 如何使用 IDAGolangHelper插件
  7. 使用TensorFlow.js的AI聊天机器人一:检测文本中的情绪
  8. 解决gcc version 不匹配问题。
  9. L1-028. 判断素数-PAT团体程序设计天梯赛GPLT
  10. mysql 相关记录
  11. java2实用教程第四版pdf下载_Java 2实用教程(第4版)
  12. Visual Studio2022 离线安装包下载
  13. 深入探索 Android 网络优化(三、网络优化篇)下
  14. Geek Challenge
  15. Win10系统无法安装geforce game ready driver?
  16. 【有利可图网】PS实战系列:制作树林与文字结合的创意文字效果
  17. 图像形状上下文特征ShapeContexts
  18. 据说,年薪百万的程序员,都是这么开悟的
  19. Android Telephony纲要
  20. 一、我来说LuCI: LuCI官方----2.UCI

热门文章

  1. Android Studio --- [学习笔记]Button、TextView、EditText
  2. es6 --- 使用proxy对数据进行劫持
  3. 15 错误边界与使用技巧
  4. [BZOJ3992]序列统计
  5. Oracle按用户进行统计信息更新
  6. Java 中参数传递是传值还是引用?
  7. zoj 3511 Cake Robbery(线段树)
  8. eclipse定制化配置调优、初始化配置指南、可以解决启动慢等问题
  9. windwos 批处理重定向, 讲的策彻底
  10. 在俱乐部首页看不到的团队成员(更新中...)