介绍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 相关文章推荐
ArrayList类(增强版)
Apr 04 Javascript
JavaScript 使用技巧精萃(.net html
Apr 25 Javascript
jquery 入门教程 [翻译] 推荐
Aug 17 Javascript
JS中typeof与instanceof之间的区别总结
Nov 14 Javascript
Bootstrap3 Grid system原理及应用详解
Sep 30 Javascript
JS焦点图,JS 多个页面放多个焦点图的实例
Dec 08 Javascript
angular学习之ngRoute路由机制
Apr 12 Javascript
vue自定义全局组件(自定义插件)的用法
Jan 30 Javascript
p5.js实现斐波那契螺旋的示例代码
Mar 22 Javascript
JS实现的字符串数组去重功能小结
Jun 17 Javascript
《javascript设计模式》学习笔记四:Javascript面向对象程序设计链式调用实例分析
Apr 07 Javascript
Vue实现导入Excel功能步骤详解
Jul 03 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
PHP把网页保存为word文件的三种方法
2014/04/01 PHP
PHP管理依赖(dependency)关系工具 Composer 安装与使用
2014/08/18 PHP
PHP常用处理静态操作类
2015/04/03 PHP
php简单复制文件的方法
2016/05/09 PHP
使用PHPMailer发送邮件实例
2017/02/15 PHP
thinkPHP5.0框架模块设计详解
2017/03/18 PHP
js中各浏览器中鼠标按键值的差异
2011/04/07 Javascript
jQuery实现跨域
2015/02/03 Javascript
jQuery+AJAX实现网页无刷新上传
2015/02/22 Javascript
详解js跨域原理以及2种解决方案
2015/12/09 Javascript
JS采用绝对定位实现回到顶部效果完整实例
2016/06/20 Javascript
JS实现的集合去重,交集,并集,差集功能示例
2018/03/13 Javascript
微信小程序实现打卡日历功能
2020/09/21 Javascript
微信小程序后端(java)开发流程的详细步骤
2019/11/13 Javascript
[03:07]完美世界DOTA2联赛PWL DAY10 决赛集锦
2020/11/11 DOTA
[01:38:19]夜魇凡尔赛茶话会 第五期
2021/03/11 DOTA
Python实现的tab文件操作类分享
2014/11/20 Python
python通过正则查找微博@(at)用户的方法
2015/03/13 Python
Python cookbook(数据结构与算法)从序列中移除重复项且保持元素间顺序不变的方法
2018/03/13 Python
TensorFlow实现简单卷积神经网络
2018/05/24 Python
Python SQL查询并生成json文件操作示例
2018/08/17 Python
Django 自定义分页器的实现代码
2019/11/24 Python
django-利用session机制实现唯一登录的例子
2020/03/16 Python
Python中zipfile压缩文件模块的基本使用教程
2020/06/14 Python
如何在python中处理配置文件代码实例
2020/09/27 Python
中国医药集团国药在线:国药网
2017/02/06 全球购物
美国领先的在线邮轮旅游公司:CruiseDirect
2018/06/07 全球购物
意大利折扣和优惠券网站:Groupalia
2019/10/09 全球购物
竞选班长演讲稿
2013/12/30 职场文书
优秀食品类广告词
2014/03/19 职场文书
2015年会计工作总结范文
2015/05/26 职场文书
千与千寻观后感
2015/06/04 职场文书
辩论赛新闻稿
2015/07/17 职场文书
环保建议书作文300字
2015/09/14 职场文书
redis 存储对象的方法对比分析
2021/08/02 Redis
Java使用HttpClient实现文件下载
2022/08/14 Java/Android