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的$命名冲突详细解析
Dec 28 Javascript
JS中attr和prop属性的区别以及优先选择示例介绍
Jun 30 Javascript
Node.js中的事件驱动编程详解
Aug 16 Javascript
jQuery+CSS实现的网页二级下滑菜单效果
Aug 25 Javascript
javascript手风琴下拉菜单实现代码
Nov 12 Javascript
详解JavaScript基于面向对象之创建对象(2)
Dec 10 Javascript
JavaScript如何实现对数字保留两位小数一位自动补零
Dec 18 Javascript
深入剖析JavaScript中的函数currying柯里化
Apr 29 Javascript
AngularJS实现动态添加Option的方法
May 17 Javascript
Angularjs过滤器实现动态搜索与排序功能示例
Dec 13 Javascript
微信小程序中使用vant框架的具体步骤
Feb 18 Javascript
JavaScript前端面试组合函数
Jun 21 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缩略图生成程式(需要GD库支持)
2007/03/06 PHP
php 图片加水印与上传图片加水印php类
2010/05/12 PHP
PHP学习 变量使用总结
2011/03/24 PHP
PHP可逆加密/解密函数分享
2012/09/25 PHP
PHP5中实现多态的两种方法实例分享
2014/04/21 PHP
php去掉文件前几行的方法
2015/07/29 PHP
PHP搭建大文件切割分块上传功能示例
2017/01/04 PHP
javascript 写类方式之九
2009/07/05 Javascript
jquery插件之easing 动态菜单
2010/08/21 Javascript
node.js中的fs.lstatSync方法使用说明
2014/12/16 Javascript
Vue.js开发环境快速搭建教程
2017/03/17 Javascript
JavaScript之underscore_动力节点Java学院整理
2017/07/03 Javascript
详解wow.js中各种特效对应的类名
2017/09/13 Javascript
Vue $mount实战之实现消息弹窗组件
2019/04/22 Javascript
p5.js绘制创意自画像
2019/11/04 Javascript
vue 组件销毁并重置的实现
2020/01/13 Javascript
js实现弹幕飞机效果
2020/08/27 Javascript
Vue组件通信$attrs、$listeners实现原理解析
2020/09/03 Javascript
vue单应用在ios系统中实现微信分享功能操作
2020/09/07 Javascript
在vue中嵌入外部网站的实现
2020/11/13 Javascript
[46:28]EG vs Liquid 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.23
2019/09/05 DOTA
python基础教程之popen函数操作其它程序的输入和输出示例
2014/02/10 Python
django最快程序开发流程详解
2019/07/19 Python
Python Multiprocessing多进程 使用tqdm显示进度条的实现
2019/08/13 Python
pandas数据处理进阶详解
2019/10/11 Python
python单例模式原理与创建方法实例分析
2019/10/26 Python
Python3交互式shell ipython3安装及使用详解
2020/07/11 Python
Python 下载Bing壁纸的示例
2020/09/29 Python
详解HTML5 Canvas绘制不规则图形时的非零环绕原则
2016/03/21 HTML / CSS
芬兰灯具网上商店:Nettilamppu.fi
2018/06/30 全球购物
高中毕业自我鉴定
2013/12/22 职场文书
六年级数学教学反思
2014/02/03 职场文书
干部下基层实施方案
2014/03/14 职场文书
重温入党誓词主持词
2015/06/29 职场文书
幼儿园教师培训心得体会
2016/01/21 职场文书
GitHub上77.9K的Axios项目有哪些值得借鉴的地方详析
2021/06/15 Javascript