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 相关文章推荐
JQuery与iframe交互实现代码
Dec 24 Javascript
基于Jquery的回车成tab焦点切换效果代码(Enter To Tab )
Nov 14 Javascript
JavaScript中json对象和string对象之间相互转化
Dec 26 Javascript
Javascript学习笔记之 函数篇(二) : this 的工作机制
Jun 24 Javascript
js获取时间并实现字符串和时间戳之间的转换
Jan 05 Javascript
JavaScript使用ActiveXObject访问Access和SQL Server数据库
Apr 02 Javascript
js中开关变量使用实例
Feb 24 Javascript
Vue.use源码分析
Apr 22 Javascript
实例学习JavaScript读取和写入cookie
Jan 29 Javascript
JavaScript实现连连看连线算法
Jan 05 Javascript
js实现自动锁屏功能
Jun 02 Javascript
JS的深浅复制详细
Oct 16 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维护文件系统
2006/10/09 PHP
php页面消耗内存过大的处理办法
2013/03/18 PHP
php去除字符串中空字符的常用方法小结
2015/03/17 PHP
PHP函数超时处理方法
2016/02/14 PHP
PHP操作Redis常用命令的实例详解
2020/12/23 PHP
js限制textarea每行输入字符串长度的代码
2012/10/31 Javascript
js获取控件位置以及不同浏览器中的差别介绍
2013/08/08 Javascript
Javascript中克隆一个数组的实现代码
2013/12/06 Javascript
js+css实现回到顶部按钮(back to top)
2016/03/02 Javascript
Bootstrap Paginator分页插件与ajax相结合实现动态无刷新分页效果
2016/05/27 Javascript
js插件Jcrop自定义截取图片功能
2016/10/14 Javascript
详解angularjs popup-table 弹出框表格指令
2017/09/20 Javascript
javaScript实现滚动条事件详解
2020/03/24 Javascript
mpvue跳转页面及注意事项
2018/08/03 Javascript
node中的cookie的具体使用
2018/09/13 Javascript
js实现从右往左匀速显示图片(无缝轮播)
2020/06/29 Javascript
Vue使用预渲染代替SSR的方法
2020/07/02 Javascript
详解实现vue的数据响应式原理
2021/01/20 Vue.js
Python使用代理抓取网站图片(多线程)
2014/03/14 Python
Django集成搜索引擎Elasticserach的方法示例
2019/06/04 Python
在python中实现同行输入/接收多个数据的示例
2019/07/20 Python
对Django 中request.get和request.post的区别详解
2019/08/12 Python
Python实现多线程下载脚本的示例代码
2020/04/03 Python
PyQt5通过信号实现MVC的示例
2021/02/06 Python
纯HTML+CSS3制作导航菜单(附源码)
2013/04/24 HTML / CSS
一款纯css3实现简单的checkbox复选框和radio单选框
2014/11/05 HTML / CSS
static全局变量与普通的全局变量有什么区别?static局部变量和普通局部变量有什么区别?static函数与普通函数有什么区别?
2015/02/22 面试题
会计助理的岗位职责
2013/11/29 职场文书
大学生个人自荐信样本
2014/03/02 职场文书
求职信名称怎么写
2014/05/26 职场文书
中学清明节活动总结
2014/07/04 职场文书
2014班子成员自我剖析材料思想汇报
2014/10/01 职场文书
代领报检证委托书范本
2014/10/11 职场文书
探讨Java中的深浅拷贝问题
2021/06/26 Java/Android
进行数据处理的6个 Python 代码块分享
2022/04/06 Python
MySQL数据库如何使用Shell进行连接
2022/04/12 MySQL