Prototype Template对象 学习


Posted in Javascript onJuly 19, 2009
var Template = Class.create({ 
//初始化方法 
initialize: function(template, pattern) { 
this.template = template.toString(); 
this.pattern = pattern || Template.Pattern; 
}, //格式化方法,如果从java的角度来说,其实叫format更好 :) 
evaluate: function(object) { 
    //检查是否定义了toTemplateReplacements方法,是的话调用 
    //整个的Prototype框架中,只有Hash对象定义了这个方法 
if (object && Object.isFunction(object.toTemplateReplacements)) 
object = object.toTemplateReplacements(); 
    //这里的gsub是String对象里面的方法,可以简单的认为就是替换字符串中所有匹配pattern的部分 
return this.template.gsub(this.pattern, function(match) { 
//match[0]是整个的匹配Template.Pattern的字符串 
     //match[1]是匹配字符串前面的一个字符 
     //match[2]是匹配${var}这个表达式的部分 
     //match[3]是'#{var}'表达式的'var'部分 
     //如果object为null,则把所有的${var}表达式替换成'' 
if (object == null) return (match[1] + ''); 
     //取得匹配表达式前一个字符 
var before = match[1] || ''; 
     //如果前一个字符串为'\',则直接返回匹配的表达式,不进行替换 
if (before == '\\') return match[2]; 
var ctx = object, expr = match[3]; 
     //这个正则表达式好像就是检查var是否是合法的名称,暂时没看懂这个正则表达式的意义? 
var pattern = /^([^.[]+|\[((?:.*?[^\\])?)\])(\.|\[|$)/; 
match = pattern.exec(expr); 
     //如果var不符合要求,则直接返回前一个字符 
if (match == null) return before; 
//逐个替换'#{var}'表达式部分 
while (match != null) { 
         //不懂下面这个检查什么意思? 
var comp = match[1].startsWith('[') ? match[2].gsub('\\\\]', ']') : match[1]; 
ctx = ctx[comp]; 
if (null == ctx || '' == match[3]) break; 
expr = expr.substring('[' == match[3] ? match[1].length : match[0].length); 
match = pattern.exec(expr); 
} 
     //返回替换后的结果,'#{var}' ==> 'value' 
return before + String.interpret(ctx); 
}); 
} 
}); 
//默认的模板匹配正则表达式,形如#{var},很像JSP中的EL表达式 
Template.Pattern = /(^|.|\r|\n)(#\{(.*?)\})/;

上面基本上把evaluate方法讲了一遍,有些地方没怎么看明白,那些正则表达式太难懂了。。。谁知道的告诉我?

下面看一下示例:

var myTemplate = new Template('The TV show #{title} was created by #{author}.'); var show = {title: 'The Simpsons', author: 'Matt Groening', network: 'FOX' }; 
myTemplate.evaluate(show); 
// -> The TV show The Simpsons was created by Matt Groening.

var t = new Template('in #{lang} we also use the \\#{variable} syntax for templates.'); 
var data = {lang:'Ruby', variable: '(not used)'}; t.evaluate(data); 
// -> in Ruby we also use the #{variable} syntax for templates.

//自定义匹配模式 
var syntax = /(^|.|\r|\n)(\<%=\s*(\w+)\s*%\>)/; //matches symbols like '<%= field %>' 
var t = new Template('<div>Name: <b><%= name %></b>, Age: <b><%=age%></b></div>', syntax); 
t.evaluate( {name: 'John Smith', age: 26} ); 
// -> <div>Name: <b>John Smith</b>, Age: <b>26</b></div>
var conversion1 = {from: 'meters', to: 'feet', factor: 3.28}; 
var conversion2 = {from: 'kilojoules', to: 'BTUs', factor: 0.9478}; 
var conversion3 = {from: 'megabytes', to: 'gigabytes', factor: 1024}; var templ = new Template('Multiply by #{factor} to convert from #{from} to #{to}.'); 
[conversion1, conversion2, conversion3].each( function(conv){ templ.evaluate(conv); }); 
// -> Multiply by 3.28 to convert from meters to feet. 
// -> Multiply by 0.9478 to convert from kilojoules to BTUs. 
// -> Multiply by 1024 to convert from megabytes to gigabytes.
Javascript 相关文章推荐
Add a Formatted Table to a Word Document
Jun 15 Javascript
Javascript Global对象
Aug 13 Javascript
JavaScript基本数据类型及值类型和引用类型
Aug 25 Javascript
微信小程序 canvas API详解及实例代码
Oct 08 Javascript
vue.js异步上传文件前后端实现代码
Aug 22 Javascript
webpack 打包压缩js和css的方法示例
Mar 20 Javascript
小程序云函数调用API接口的方法
May 17 Javascript
Vue 2.0 中依赖注入 provide/inject组合实战
Jun 20 Javascript
vue实现一拉到底的滑动验证
Jul 25 Javascript
javascript实现的图片预览和上传功能示例【兼容IE 9】
May 01 Javascript
在vue中对数组值变化的监听与重新响应渲染操作
Jul 17 Javascript
js实现金山打字通小游戏
Jul 24 Javascript
Prototype Number对象 学习
Jul 19 #Javascript
Prototype ObjectRange对象学习
Jul 19 #Javascript
Prototype RegExp对象 学习
Jul 19 #Javascript
Prototype Class对象学习
Jul 19 #Javascript
javascript iframe内的函数调用实现方法
Jul 19 #Javascript
9个javascript语法高亮插件 推荐
Jul 18 #Javascript
Google Map Api和GOOGLE Search Api整合实现代码
Jul 18 #Javascript
You might like
PHP+ACCESS 文章管理程序代码
2010/06/21 PHP
php 中英文语言转换类代码
2011/08/11 PHP
多个PHP中文字符串截取函数
2013/11/12 PHP
php字符串函数学习之substr()
2015/03/27 PHP
php array_map()函数实例用法
2021/03/03 PHP
CutePsWheel javascript libary 控制输入文本框为可使用滚轮控制的js库
2010/02/07 Javascript
Javascript insertAfter() 实现函数代码
2011/10/12 Javascript
javascript验证上传文件的类型限制必须为某些格式
2013/11/14 Javascript
JS批量修改PS中图层名称的方法
2014/01/26 Javascript
使用console进行性能测试
2015/04/27 Javascript
jQuery中的通配符选择器使用总结
2016/05/30 Javascript
基于jQuery实现多标签页切换的效果(web前端开发)
2016/07/24 Javascript
详解Nodejs基于mongoose模块的增删改查的操作
2016/12/21 NodeJs
浅谈关于angularJs中使用$.ajax的注意点
2017/08/12 Javascript
JS操作时间 - UNIX时间戳的简单介绍(必看篇)
2017/08/16 Javascript
Nodejs模块的调用操作实例分析
2018/12/25 NodeJs
JS基于开关思想实现的数组去重功能【案例】
2019/02/18 Javascript
vue视频播放暂停代码
2019/11/08 Javascript
JS实现音乐钢琴特效
2020/01/06 Javascript
Vue 自适应高度表格的实现方法
2020/05/13 Javascript
让你30分钟快速掌握vue3教程
2020/10/26 Javascript
[02:47]3.19DOTA2发布会 国服成长历程回顾
2014/03/25 DOTA
[02:34]DOTA2英雄基础教程 幽鬼
2014/01/02 DOTA
[25:45]2018DOTA2亚洲邀请赛4.5SOLO赛 Sylar vs Paparazi
2018/04/06 DOTA
解决Python plt.savefig 保存图片时一片空白的问题
2019/01/10 Python
PyQt5+requests实现车票查询工具
2019/01/21 Python
Windows系统Python直接调用C++ DLL的方法
2019/08/01 Python
在TensorFlow中屏蔽warning的方式
2020/02/04 Python
python shapely.geometry.polygon任意两个四边形的IOU计算实例
2020/04/12 Python
详解HTML5 Canvas绘制不规则图形时的非零环绕原则
2016/03/21 HTML / CSS
《阳光》教学反思
2014/02/23 职场文书
村官个人总结范文
2015/03/03 职场文书
管理失职检讨书范文
2015/05/05 职场文书
《夸父追日》教学反思
2016/02/20 职场文书
送给客户微信问候语!
2019/07/04 职场文书
MySQL索引失效十种场景与优化方案
2023/05/08 MySQL