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 相关文章推荐
web前端开发也需要日志
Dec 09 Javascript
浅说js变量
May 25 Javascript
js加强的经典分页实例
Mar 15 Javascript
关于IE BUG与字符串截取substr的解决办法
Apr 10 Javascript
原生js和jQuery随意改变div属性style的名称和值
Oct 22 Javascript
使用jQuery实现Web页面换肤功能的要点解析
May 12 Javascript
KnockoutJS 3.X API 第四章之click绑定
Oct 10 Javascript
Web 开发中Ajax的Session 超时处理方法
Jan 19 Javascript
Vue开发实现吸顶效果的示例代码
Aug 21 Javascript
iphone刘海屏页面适配方法
May 07 Javascript
JavaScript函数重载操作实例浅析
May 02 Javascript
vue输入框使用模糊搜索功能的实现代码
May 26 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下通过file_get_contents的代理使用方法
2011/02/16 PHP
php实现文件下载简单示例(代码实现文件下载)
2014/03/10 PHP
PHP小程序支付功能完整版【基于thinkPHP】
2019/03/26 PHP
几个javascript操作word的参考代码
2009/10/26 Javascript
基于jquery的图片轮播 tab切换组件
2012/07/19 Javascript
javaScript矢量图表库-gRaphael几行代码实现精美的条形图/饼图/点图/曲线图
2013/01/09 Javascript
form表单只提交数据而不进行页面跳转的解决方案
2013/09/18 Javascript
JavaScript中的连字符详解
2013/11/28 Javascript
javascript:FF/Chrome与IE动态加载元素的区别说明
2014/01/26 Javascript
JavaScript获取按钮所在form表单id的方法
2015/04/02 Javascript
javascript判断并获取注册表中可信任站点的方法
2015/06/01 Javascript
ECMAScript6块级作用域及新变量声明(let)
2015/06/12 Javascript
JS实现图片的不间断连续滚动的简单实例
2016/06/03 Javascript
Vue+ElementUI实现表单动态渲染、可视化配置的方法
2018/03/07 Javascript
JS简单获取并修改input文本框内容的方法示例
2018/04/08 Javascript
Vue中的this.$options.data()和this.$data用法说明
2020/07/26 Javascript
基于vue 动态菜单 刷新空白问题的解决
2020/08/06 Javascript
python黑魔法之编码转换
2016/01/25 Python
python通过微信发送邮件实现电脑关机
2018/06/20 Python
python实现从文件中读取数据并绘制成 x y 轴图形的方法
2018/10/14 Python
利用python和ffmpeg 批量将其他图片转换为.yuv格式的方法
2019/01/08 Python
详解Numpy数组转置的三种方法T、transpose、swapaxes
2019/05/27 Python
python打印异常信息的两种实现方式
2019/12/24 Python
Python 实现将数组/矩阵转换成Image类
2020/01/09 Python
WoolOvers爱尔兰:羊绒、羊毛和棉针织品
2017/01/04 全球购物
怎样在程序里获得一个空指针
2015/01/24 面试题
结婚保证书范文
2014/04/29 职场文书
艺术设计专业毕业生推荐信
2014/07/08 职场文书
2014教师个人自我评价范文
2014/09/13 职场文书
工作疏忽检讨书500字
2014/10/26 职场文书
2014年店长工作总结
2014/11/17 职场文书
2016年乡镇七一建党节活动总结
2016/04/05 职场文书
普希金诗歌赏析(6首)
2019/08/22 职场文书
手把手教你怎么用Python实现zip文件密码的破解
2021/05/27 Python
5人制售《绝地求生》游戏外挂获利500多万元 被判刑
2022/03/31 其他游戏
Python Numpy库的超详细教程
2022/04/06 Python