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 相关文章推荐
javascript应用:Iframe自适应其加载的内容高度
Apr 10 Javascript
关于js datetime的那点事
Nov 15 Javascript
在ASP.NET中使用JavaScript脚本的方法
Nov 12 Javascript
jQuery中ajax的load()方法用法实例
Dec 26 Javascript
js实现带按钮的上下滚动效果
May 12 Javascript
BootStrap 智能表单实战系列(二)BootStrap支持的类型简介
Jun 13 Javascript
Angular组件化管理实现方法分析
Mar 17 Javascript
Angular2学习教程之TemplateRef和ViewContainerRef详解
May 25 Javascript
Agularjs妙用双向数据绑定实现手风琴效果
May 26 Javascript
AngularJS表单验证功能
Oct 19 Javascript
Vue刷新修改页面中数据的方法
Sep 16 Javascript
js正则取值的结果数组调试方法
Oct 10 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调用shell的方法
2014/11/05 PHP
php中addslashes函数与sql防注入
2014/11/17 PHP
PHP设计模式之工厂模式与单例模式
2016/09/28 PHP
CI框架表单验证实例详解
2016/11/21 PHP
php根据年月获取当月天数及日期数组的方法
2016/11/30 PHP
有道JavaScript监听浏览器的问题
2010/06/23 Javascript
javascript取消文本选定的实现代码
2010/11/14 Javascript
jQuery学习笔记之jQuery的动画
2010/12/22 Javascript
关于jQuery的inArray 方法介绍
2011/10/08 Javascript
jquery 多个radio的click事件实例
2016/12/03 Javascript
BootStrap 实现各种样式的进度条效果
2016/12/07 Javascript
JavaScript中三种常见的排序方法
2017/02/24 Javascript
提高Node.js性能的应用技巧分享
2017/08/10 Javascript
react-router 路由切换动画的实现示例
2018/12/03 Javascript
浅谈一个webpack构建速度优化误区
2019/06/24 Javascript
解决vue项目F5刷新mounted里的函数不执行问题
2019/11/05 Javascript
vue表单验证之禁止input输入框输入空格
2020/12/03 Vue.js
python实现自动登录人人网并访问最近来访者实例
2014/09/26 Python
Python下的subprocess模块的入门指引
2015/04/16 Python
Python实现统计给定字符串中重复模式最高子串功能示例
2018/05/16 Python
django 邮件发送模块smtp使用详解
2019/07/22 Python
python中从for循环延申到推导式的具体使用
2019/11/29 Python
屏蔽Django admin界面添加按钮的操作
2020/03/11 Python
使用css3实现的tab选项卡代码分享
2014/12/09 HTML / CSS
CSS3简单实现照片墙
2014/12/12 HTML / CSS
美国网上花店:JustFlowers
2017/02/12 全球购物
介绍JAVA 中的Collection FrameWork(及如何写自己的数据结构)
2014/10/31 面试题
儿科护士自我鉴定
2013/10/14 职场文书
大学生学年自我鉴定
2014/02/10 职场文书
党的群众路线教育实践活动对照检查材料(教师)
2014/09/24 职场文书
计划生育证明格式及范本
2014/10/09 职场文书
购房委托书
2014/10/15 职场文书
晚会闭幕词
2015/01/28 职场文书
2015年学校德育工作总结
2015/04/22 职场文书
暂停营业通知
2015/04/25 职场文书
关于HTML编码导致的乱码问题
2021/09/04 HTML / CSS