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 相关文章推荐
FLASH 广告之外的链接
Dec 16 Javascript
Tab页界面,用jQuery及Ajax技术实现
Sep 21 Javascript
Javascript基础 函数“重载” 详细介绍
Oct 25 Javascript
js通过更改按钮的显示样式实现按钮的滑动效果
Apr 23 Javascript
node.js中的fs.lchownSync方法使用说明
Dec 16 Javascript
JavaScript的jQuery库中function的存在和参数问题
Aug 13 Javascript
简单谈谈javascript中的变量、作用域和内存问题
Aug 30 Javascript
CSS中position属性之fixed实现div居中
Dec 14 Javascript
Vue.js基础知识汇总
Apr 27 Javascript
javascript正则表达式之分组概念与用法实例
Jun 16 Javascript
详解基于angular路由的requireJs按需加载js
Jan 20 Javascript
9102年webpack4搭建vue项目的方法步骤
Feb 20 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数据类型之整数类型、浮点数的介绍
2013/04/28 PHP
spl_autoload_register与autoload的区别详解
2013/06/03 PHP
Laravel框架实现调用百度翻译API功能示例
2019/05/30 PHP
TreeView 用法(有代码)(asp.net)
2011/07/15 Javascript
一个简单的动态加载js和css的jquery代码
2014/09/01 Javascript
JavaScript中九种常用排序算法
2014/09/02 Javascript
JavaScript基础教程之alert弹出提示框实例
2014/10/16 Javascript
node.js中的path.delimiter方法使用说明
2014/12/09 Javascript
jQuery中[attribute=value]选择器用法实例
2014/12/31 Javascript
js文本框输入内容智能提示效果
2015/12/02 Javascript
javascript中的replace函数(带注释demo)
2018/01/07 Javascript
浅谈es6中export和export default的作用及区别
2018/02/07 Javascript
学习JS中的DOM节点以及操作
2018/04/30 Javascript
讲解vue-router之什么是嵌套路由
2018/05/28 Javascript
详解vue-cli+es6引入es5写的js(两种方法)
2019/04/19 Javascript
17道题让你彻底理解JS中的类型转换
2019/08/08 Javascript
uniapp微信小程序实现一个页面多个倒计时
2020/11/01 Javascript
[01:02:20]Mineski vs TNC 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
[46:58]完美世界DOTA2联赛PWL S3 Forest vs LBZS 第一场 12.17
2020/12/19 DOTA
python 3利用BeautifulSoup抓取div标签的方法示例
2017/05/28 Python
python网络应用开发知识点浅析
2019/05/28 Python
Python Scrapy多页数据爬取实现过程解析
2020/06/12 Python
python 装饰器的实际作用有哪些
2020/09/07 Python
学点简单的Django之第一个Django程序的实现
2021/02/24 Python
丝芙兰新加坡官网:Sephora新加坡
2018/12/04 全球购物
澳大利亚优质葡萄酒专家:Vintage Cellars
2019/01/08 全球购物
日本动漫周边服饰销售网站:Atsuko
2019/12/16 全球购物
巴西24小时在线药房:Drogasil
2020/06/20 全球购物
教师演讲稿大全
2014/05/16 职场文书
应聘会计求职信
2014/06/11 职场文书
小学捐书活动总结
2014/07/05 职场文书
庐山导游词
2015/02/03 职场文书
企业财务经理岗位职责
2015/04/08 职场文书
趣味运动会赞词
2015/07/22 职场文书
导游词之杭州岳王庙
2019/11/13 职场文书
python 闭包函数详细介绍
2022/04/19 Python