介绍JavaScript的一个微型模版


Posted in Javascript onJune 24, 2015

 我一直在使用一个小工具,并发现它在构建Javascript应用过程中非常实用。它是一个非常简单的模板函数,速度快,支持缓存,并容易使用。我想分享一下使用它的过程中的一些技巧。

以下是模板函数的代码(你可以从正要出版的Secrets of the JavaScript Ninja一书中得到更精炼的版本):
 

// 简单JavaScript模板引擎
// John Resig - http://ejohn.org/ - MIT Licensed
(function(){
 var cache = {};
 
 this.tmpl = function tmpl(str, data){
  // 判断我们是否已经有这么一个模板,或者我们需要载入模板
  // 并保证把结果保存到缓存中。
  var fn = !/\W/.test(str) ?
   cache[str] = cache[str] ||
    tmpl(document.getElementById(str).innerHTML) :
   
   // 生成一个可重用的函数,用于提供模板生成功能
   // (它会被记录到缓存内).
   new Function("obj",
    "var p=[],print=function(){p.push.apply(p,arguments);};" +
    
    // 通过with(){}把数据作为本地变量引入
    "with(obj){p.push('" +
    
    // 把模板转换未纯javascript代码
    str
     .replace(/[\r\t\n]/g, " ")
     .split("<%").join("\t")
     .replace(/((^|%>)[^\t]*)'/g, "$1\r")
     .replace(/\t=(.*?)%>/g, "',$1,'")
     .split("\t").join("');")
     .split("%>").join("p.push('")
     .split("\r").join("\\'")
   + "');}return p.join('');");
  
  // 给用户提供一些基本的柯里化功能
  return data ? fn( data ) : fn;
 };
})();

你的模板代码看起来将是类似于(这并不是规定的格式,但是我比较喜欢这样):

 

<script type="text/html" id="item_tmpl">
 <div id="<%=id%>" class="<%=(i % 2 == 1 ? " even" : "")%>">
  <div class="grid_1 alpha right">
   <img class="righted" src="<%=profile_image_url%>"/>
  </div>
  <div class="grid_6 omega contents">
   <p><b><a href="/<%=from_user%>"><%=from_user%></a>:</b> <%=text%></p>
  </div>
 </div>
</script>

你也可以内嵌脚本:
 

<script type="text/html" id="user_tmpl">
 <% for ( var i = 0; i < users.length; i++ ) { %>
  <li><a href="<%=users[i].url%>"><%=users[i].name%></a></li>
 <% } %>
</script>

提示:把脚本内嵌到你的页面中,并且content-type是未知的(例如在这个例子中,浏览器不知道该如何执行 text/html 脚本),那么浏览器会把它忽略掉 - 同时搜索引擎和屏幕读取也会忽略掉它。这是一个非常好的伪装代码,可以把你的模板嵌入到你的页面中。我喜欢使用快速却又随性的技术,我只需一到两个小模板,就可以得到又轻型和快速应用。

你可以在脚本中,像这样去使用:
 

var results = document.getElementById("results");
results.innerHTML = tmpl("item_tmpl", dataObject);

你可以预编译结果,在稍后使用。如果你只使用一个ID作为参数(或者一个模板代码)来调用模板函数,那么它就会返回一个预编译的函数,你就可以在稍后调用:
 

var show_user = tmpl("item_tmpl"), html = "";
for ( var i = 0; i < users.length; i++ ) {
 html += show_user( users[i] );
}

这是目前最没办法的办法,解析和转换代码——对这你很可能无爱。不过他只有我中意的一项技术:在字符串中用字符静态搜索和静态替换时,比如split("match").join("replace"),执行速度更好——看起来不直观但可以有效工作在现代浏览器里(下一版FireFox会大幅提高replace(/match/g,"replace")的性能——所以现在这样的长表达式以后不需要的)

放轻松享受它——我很好奇代码中的突变。即使它很简单,仍然有很多事情可以用它做。

Javascript 相关文章推荐
HTTP状态代码以及定义(解释)
Feb 02 Javascript
js简单实现HTML标签Select联动带跳转
Oct 23 Javascript
调试代码导致IE出错的避免方法
Apr 04 Javascript
简单谈谈jQuery(function(){})与(function(){})(jQuery)
Dec 19 Javascript
js实现透明度渐变效果的方法
Apr 10 Javascript
Jquery结合HTML5实现文件上传
Jun 25 Javascript
如何消除inline-block属性带来的标签间间隙
Mar 31 Javascript
jquery 无限极下拉菜单的简单实例(精简浓缩版)
May 31 Javascript
JS实现列表的响应式排版(推荐)
Sep 01 Javascript
AngularJS 单选框及多选框的双向动态绑定
Apr 20 Javascript
js遍历详解(forEach, map, for, for...in, for...of)
Aug 28 Javascript
Vue详细的入门笔记
May 10 Vue.js
js实现a标签超链接提交form表单的方法
Jun 24 #Javascript
对JavaScript客户端应用编程的一些建议
Jun 24 #Javascript
javascript删除数组重复元素的方法汇总
Jun 24 #Javascript
js实现跨域的方法实例详解
Jun 24 #Javascript
JavaScript中的Promise使用详解
Jun 24 #Javascript
JavaScript面对国际化编程时的一些建议
Jun 24 #Javascript
对JavaScript的全文搜索实现相关度评分的功能的方法
Jun 24 #Javascript
You might like
Zend Studio去除编辑器的语法警告设置方法
2012/10/24 PHP
PHP数据集构建JSON格式及新数组的方法
2012/11/07 PHP
使用PHP实现蜘蛛访问日志统计
2013/07/05 PHP
php中substr()函数参数说明及用法实例
2014/11/15 PHP
yii2中使用Active Record模式的方法
2016/01/09 PHP
PHP实现合并两个排序链表的方法
2018/01/19 PHP
laravel获取不到session的三种解决办法【推荐】
2018/09/16 PHP
Extjs学习笔记之三 extjs form更多的表单项
2010/01/07 Javascript
javascript利用初始化数据装配模版的实现代码
2010/11/17 Javascript
js获取checkbox值的方法
2015/01/28 Javascript
尝试动手制作javascript放大镜效果
2015/12/25 Javascript
简单介绍jsonp 使用小结
2016/01/27 Javascript
AngularJS 依赖注入详解和简单实例
2016/07/28 Javascript
基于JS实现限时抢购倒计时间表代码
2017/05/09 Javascript
Vue 动态路由的实现及 Springsecurity 按钮级别的权限控制
2019/09/05 Javascript
微信小程序之 catalog 切换实现解析
2019/09/12 Javascript
vue下的@change事件的实现
2019/10/25 Javascript
[12:29]2018国际邀请赛 开幕秀
2018/08/22 DOTA
[01:06:59]完美世界DOTA2联赛PWL S2 Magma vs FTD 第一场 11.29
2020/12/02 DOTA
Python简单读写Xls格式文档的方法示例
2018/08/17 Python
浅谈python实现Google翻译PDF,解决换行的问题
2018/11/28 Python
Python flask框架post接口调用示例
2019/07/03 Python
代码实例讲解python3的编码问题
2019/07/08 Python
解决python有时候import不了当前的包问题
2019/08/28 Python
Django多数据库配置及逆向生成model教程
2020/03/28 Python
css3过渡_动力节点Java学院整理
2017/07/11 HTML / CSS
德国柯吉澳趣味家居:Koziol
2017/08/24 全球购物
国际礼品店:GiftsnIdeas
2018/05/03 全球购物
CHARLES & KEITH台湾官网:新加坡时尚品牌
2019/07/30 全球购物
管理学专业个人求职信范文
2013/12/13 职场文书
政府采购方案
2014/06/12 职场文书
2014年评职称工作总结
2014/11/20 职场文书
2015年12.4全国法制宣传日活动总结
2015/03/24 职场文书
幼儿园开学通知
2015/04/24 职场文书
导游词之江苏同里古镇
2019/11/18 职场文书
详解OpenCV获取高动态范围(HDR)成像
2022/04/29 Python