javascript模版引擎-tmpl 使用小窍门

一、缓存优化。tmpl 默认对嵌入到页面中的模板进行了缓存优化(即第一个参数为ID的时候),它只会对模板进行一次分析。若原始模板是直接传入到 tmpl 第一个参数中,且需要多次使用的话,建议用公用变量缓存起来,需要解析数据的时候再使用,以获得相同的优化效果。兄弟连HTML5培训

// 生成模板缓存var render = tmpl(listTmpl);

// 可多次调用模板elem.innerHTML = render(data1);elem.innerHTML = render(data2);...

二、避免未定义的变量引起系统崩溃。若模板中定义了一个变量输出,而且传入数据却少了这个项目就会出现变量未定义的错误,从而引起整个程序的崩溃。如果无法确保数据完整性,仍然有方法可以对对其成员进行探测。原版中暗含变量保存了原始传入的数据,即 obj ;而在我的升级版本中则是关键字 this,如:

<% if (this.dataName !== undefined) { %>

<%=dataName %>

<% } %>

三、调试模板。

由于模板引擎是用文本的调用的 javascript 引擎,调试工具无法定位到出错的行。在 升级版本 中你可以用调试工具输出编译好的模板缓存。例如调试这个模板:

<script id="tmpl" type="text/tmpl">

<ul>

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

<li><%=list[i].index%>. 用户: <%=list[i].user%>; 网站:<%=list[i].site%></li>

<% } %>

</ul>

输出缓存:

window.console(tmpl(‘tmpl‘).$);

日志结果:

"$111111.push(‘

<ul> ‘); for (var i = 0, l = list.length; i < l; i ++) { $111111.push(‘

<li>‘,list[i].index,‘. 用户: ‘,list[i].user,‘; 网站:‘,list[i].site,‘</li>

‘); } $111111.push(‘ </ul>

‘);return $111111"

现在你可以看到模板引擎编译好的javascript语句,可以对照这检查模板是否存在错误。

时间: 2024-10-25 19:13:24

javascript模版引擎-tmpl 使用小窍门的相关文章

最简单的JavaScript模板引擎

在小公司待久了感觉自己的知识面很小,最近逛博客园和一些技术网站看大家在说JavaScript模版引擎的事儿,完全没有概念,网上一搜这是08年开始流行起来的...本来以为这是很高深的知识,后来在网上看到jQuery作者John Resig,研究了一下,算是明白了最简单的javaScript模版引擎的原理,并没有想象的那么高大上,写篇博客推导一下John Resig写法的过程,写出一个最简单的JavaScript模版引擎. 什么是JavaScript引擎 其实在网站开发中模板还是很常见的一种技术,比

JavaScript模板引擎原理与用法

这篇文章主要介绍了JavaScript模板引擎原理与用法,结合实例形式详细分析了javascript模版引擎相关概念.原理.定义及使用方法,写的十分的全面细致,具有一定的参考价值,对此有需要的朋友可以参考学习下 一.前言 什么是模板引擎,说的简单点,就是一个字符串中有几个变量待定.比如: var tpl = 'Hei, my name is <%name%>, and I\'m <%age%> years old.'; 通过模板引擎函数把数据塞进去, var data = { &q

JavaScript 前端性能优化小窍门实例汇总

在众多语言中,JavaScript已经占有重要的一席之地,利用JavaScript我们可以做很多事情 , 应用广泛. 在web应用项目中,需要大量JavaScript的代码,将来也会越来越多. 但是由于JavaScript是一个作为解释执行的语言,而且它的单线程机制,决定了性能问题是JavaScript的弱点,也是开发者在写JavaScript的时候需注意的一个问题. 因为经常会遇到Web 2.0应用性能欠佳的问题,主因就是JavaScript性能不足,导致浏览器负荷过重. Javascript

JavaScript性能优化小窍门实例汇总

JavaScript性能优化小窍门实例汇总在众多语言中,JavaScript已经占有重要的一席之地,利用JavaScript我们可以做很多事情 , 应用广泛.在web应用项目中,需要大量JavaScript的代码,将来也会越来越多. 但是由于JavaScript是一个作为解释执行的语言,而且它的单线程机制,决定了性能问题是JavaScript的弱点,也是开发者在写JavaScript的时候需注意的一个问题. 因为经常会遇到Web 2.0应用性能欠佳的问题,主因就是JavaScript性能不足,导

让我们写快速的JavaScript,JS性能优化小窍门

JavaScript已经是目前最流行的语言了,它能做很多事情 - 网站界面,服务器端,游戏 ,操作系统 ,机器人 等等很多很多. 不过,说实话,即使它这么疯狂流行,它的性能还没有达到它的极限.是的,它在改进,但是等到它在各个方面赶上本地应用之前,在做一个HYBIRD混合应用时,你还不得不使用一些伎俩来优化它的性能. Firefox拥有目前最快的JavaScript解析器 SpiderMonkey, 有各种各样的让JavaScript的速度更快的努力,其中一个是asm.js. Asm.js是Jav

JavaScript模板引擎

JavaScript模板引擎实例应用 在之前的一篇名为<移动端基于HTML模板和JSON数据的JavaScript交互>的文章中,我向大家说明了为什么要使用JavaScript模板以及如何使用,文末还提到了laytpl.artTemplate.doT.baiduTemplate.kissyTemplate等模板引擎. 本文将举实例向大家讲解几个常用模板引擎的简单使用. 演示地址:模板引擎示例http://demo.52fhy.com/jstemp/ 准备工作 演示数据:blog.json结构:

Express模版引擎hbs备忘

最近几天折腾了下express,想找个合适的模版引擎,下面是一些折腾过程的备忘 选择标准 选择一门模版语言时,可能会考虑的几点 语法友好(micro tmpl那种语法真是够了) 支持模版嵌套(子模版的概念) 支持模版继承(extend) 前后端共用 有容错处理(最好定位到具体出错位置) 支持预编译(性能好) 注意到hbs,似乎满足大部分的需求:https://github.com/donpark/hbs getting started demo地址:https://github.com/chyi

js模版引擎handlebars.js实用教程

一.为什么选择Handlebars.js 据小菜了解,对于java开发,涉及到页面展示时,比较主流的有两种解决方案: 1. struts2+vo+el表达式. 这种方式,重点不在于struts2,而是vo和el表达式,其基本思想是:根据页面需要的信息,构造出一个实体,这个实体中包含了界面需要的所有属性,通常这个实体是由N个表中的字段构成的,俗称vo.由于vo的属性可以是String.List.Map等等等,又可以vo套vo,因此这种方式非常灵活,也非常好用. 在后台对vo进行赋值,通过strut

JavaScript模板引擎实例应用(转)

本文将举实例向大家讲解几个常用模板引擎的简单使用. 演示地址:模板引擎示例http://demo.52fhy.com/jstemp/ 准备工作 演示数据:blog.json结构: { "list": [ { "title": "这是title", "url": "http://www.cnblogs.com/52fhy/p/5271447.html", "desc": "摘要&