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 相关文章推荐
解析js中获得父窗口链接getParent方法以及各种打开窗口的方法
Jun 19 Javascript
jQuery实现带有动画效果的回到顶部和底部代码
Nov 04 Javascript
ztree获取选中节点时不能进入可视区域出现BUG如何解决
Dec 03 Javascript
angularjs创建弹出框实现拖动效果
Aug 25 Javascript
理解javascript对象继承
Apr 17 Javascript
JavaScript事件用法浅析
Oct 31 Javascript
js中获取键盘按下键值event.keyCode、event.charCode和event.which的兼容性详解
Mar 15 Javascript
深入了解javascript 数组的sort方法
Jun 01 Javascript
layui的table中显示图片方法
Aug 17 Javascript
Vue一次性简洁明了引入所有公共组件的方法
Nov 28 Javascript
深入剖析JavaScript instanceof 运算符
Jun 14 Javascript
vue页面加载时的进度条功能(实例代码)
Jan 13 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解析字符串里所有URL地址的方法
2015/04/03 PHP
php发送邮件的问题详解
2015/06/22 PHP
ThinkPHP+EasyUI之ComboTree中的会计科目树形菜单实现方法
2017/06/09 PHP
Javascript学习笔记9 prototype封装继承
2010/01/11 Javascript
Textbox控件注册回车事件及触发按钮提交事件具体实现
2013/03/04 Javascript
jquery js 获取时间差、时间格式具体代码
2013/06/05 Javascript
JS跨域问题详解
2014/11/25 Javascript
js实现iPhone界面风格的单选框和复选框按钮实例
2015/08/18 Javascript
JavaScript匿名函数之模仿块级作用域
2015/12/12 Javascript
js实现对ajax请求面向对象的封装
2016/01/08 Javascript
基于jquery实现简单的分页控件
2016/03/17 Javascript
AngularJS $injector 依赖注入详解
2016/09/14 Javascript
laydate日历控件使用方法详解
2017/11/20 Javascript
JS实现前端路由功能示例【原生路由】
2020/05/29 Javascript
详解Vue的七种传值方式
2021/02/08 Vue.js
让Python代码更快运行的5种方法
2015/06/21 Python
Linux下为不同版本python安装第三方库
2016/08/31 Python
windows下安装python的C扩展编译环境(解决Unable to find vcvarsall.bat)
2018/02/21 Python
Python基于OpenCV库Adaboost实现人脸识别功能详解
2018/08/25 Python
使用Template格式化Python字符串的方法
2019/01/22 Python
python实现输出一个序列的所有子序列示例
2019/11/18 Python
python使用paramiko实现ssh的功能详解
2020/03/06 Python
Python基于paramunittest模块实现excl参数化
2020/04/26 Python
Python导入数值型Excel数据并生成矩阵操作
2020/06/09 Python
ABOUT YOU罗马尼亚:超过600个时尚品牌
2019/09/19 全球购物
会话Bean的种类
2013/11/07 面试题
大学生毕业求职找工作的自我评价
2013/09/29 职场文书
怎样写留学自荐信
2013/11/11 职场文书
歌唱比赛获奖感言
2014/01/21 职场文书
学习型党组织建设经验材料
2014/05/26 职场文书
写给医生的感谢信
2015/01/22 职场文书
清明节文明祭祀倡议书
2015/04/28 职场文书
运动会100米加油稿
2015/07/21 职场文书
幼儿园教学反思范文
2016/03/02 职场文书
请求模块urllib之PYTHON爬虫的基本使用
2022/04/08 Python
SQL Server中的逻辑函数介绍
2022/05/25 SQL Server