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 相关文章推荐
pjblog中的UBBCode.js
Apr 25 Javascript
JavaScript 更严格的相等 [译]
Sep 20 Javascript
JS实现标签页效果(配合css)
Apr 03 Javascript
javascript实现json页面分页实例代码
Feb 20 Javascript
jQuery将所有被选中的checkbox某个属性值连接成字符串的方法
Jan 24 Javascript
体验jQuery和AngularJS的不同点及AngularJS的迷人之处
Feb 02 Javascript
基于vue.js实现图片轮播效果
Dec 01 Javascript
基于bootstrap按钮式下拉菜单组件的搜索建议插件
Mar 25 Javascript
Vue项目webpack打包部署到Tomcat刷新报404错误问题的解决方案
May 15 Javascript
微信小程序实现折叠与展开文章功能
Jun 12 Javascript
js实现固定区域内的不重叠随机圆
Oct 24 Javascript
安装多版本Vue-CLI的实现方法
Mar 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的SQL注入实现(测试代码安全不错)
2011/02/27 PHP
php下通过curl抓取yahoo boss 搜索结果的实现代码
2011/06/10 PHP
PHP对象递归引用造成内存泄漏分析
2014/08/28 PHP
php常用字符串比较函数实例汇总
2014/11/24 PHP
简单介绍PHP非阻塞模式
2016/03/03 PHP
PHP中Restful api 错误提示返回值实现思路
2016/04/12 PHP
Linux系统中为php添加pcntl扩展
2016/08/28 PHP
JavaScript几种形式的树结构菜单
2010/05/10 Javascript
javascript时间自动刷新实现原理与步骤
2013/01/06 Javascript
IE6/IE7中JavaScript json提示缺少标识符、字符串或数字问题处理
2014/12/16 Javascript
jQuery控制元素显示、隐藏、切换、滑动的方法总结
2015/04/16 Javascript
最简单的JavaScript图片轮播代码(两种方法)
2015/12/18 Javascript
Bootstrap三种表单布局的使用方法
2016/06/21 Javascript
JavaScript面试题(指针、帽子和女朋友)
2016/11/23 Javascript
8 行 Node.js 代码实现代理服务器
2016/12/05 Javascript
javascript实现滑动解锁功能
2017/03/22 Javascript
nodeJS实现路由功能实例代码
2017/06/08 NodeJs
jQuery与vue实现拖动验证码功能
2018/01/30 jQuery
AngularJS中的作用域实例分析
2018/05/16 Javascript
对angularJs中自定义指令replace的属性详解
2018/10/09 Javascript
JavaScript中关于base64的一些事
2019/05/06 Javascript
Vue 组件的挂载与父子组件的传值实例
2020/09/02 Javascript
vue单元格多列合并的实现
2020/11/26 Vue.js
Python多线程编程(二):启动线程的两种方法
2015/04/05 Python
python中is与双等于号“==”的区别示例详解
2017/11/21 Python
tensorflow获取变量维度信息
2018/03/10 Python
Python中查看变量的类型内存地址所占字节的大小
2019/06/26 Python
jupyter notebook插入本地图片的实现
2020/04/13 Python
基于Python实现2种反转链表方法代码实例
2020/07/06 Python
继承公证书
2014/04/09 职场文书
七夕活动策划方案
2014/08/16 职场文书
写给同学的新学期寄语
2015/02/27 职场文书
怀孕辞职信怎么写
2015/02/28 职场文书
疾病证明书
2015/06/19 职场文书
创业计划书之游泳馆
2019/09/16 职场文书
Django模型层实现多表关系创建和多表操作
2021/07/21 Python