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 相关文章推荐
Extjs TimeField 显示正常时间格式的代码
Jun 28 Javascript
根据邮箱的域名跳转到相应的登录页面的代码
Feb 27 Javascript
javascript中的遍历for in 以及with的用法
Dec 22 Javascript
详解JavaScript正则表达式中的global属性的使用
Jun 16 Javascript
js时间戳转为日期格式的方法
Dec 28 Javascript
Javascript类型系统之String字符串类型详解
Jun 21 Javascript
javaScript基础详解
Jan 19 Javascript
Bootstrap导航简单实现代码
Mar 06 Javascript
Bootstrap 过渡效果Transition 模态框(Modal)
Mar 17 Javascript
小程序实现按下录音松开识别语音
Nov 22 Javascript
javascript实现fetch请求返回的统一拦截
Dec 22 Javascript
js实现特别简单的钟表效果
Sep 14 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
BBS(php &amp; mysql)完整版(四)
2006/10/09 PHP
Wordpress php 分页代码
2009/10/21 PHP
PHP循环输出指定目录下的所有文件和文件夹路径例子(简单实用)
2014/05/10 PHP
PHP开发微信支付的代码分享
2014/05/25 PHP
网页常用特效代码整理
2006/06/23 Javascript
Jquery插件之多图片异步上传
2010/10/20 Javascript
JQuery each()函数如何优化循环DOM结构的性能
2012/12/10 Javascript
浅析JS刷新框架中的其他页面 &amp;&amp; JS刷新窗口方法汇总
2013/07/08 Javascript
JavaScript中的null和undefined区别介绍
2015/01/01 Javascript
JavaScript中的some()方法使用详解
2015/06/09 Javascript
jquery zTree异步加载简单实例讲解
2016/02/25 Javascript
Jquery操作cookie记住用户名
2016/03/29 Javascript
js基于cookie记录来宾姓名的方法
2016/07/19 Javascript
easyui中combotree循环获取父节点至根节点并输出路径实现方法
2016/11/10 Javascript
bootstrap实现的自适应页面简单应用示例
2017/03/09 Javascript
JavaScript贪吃蛇小组件实例代码
2017/08/20 Javascript
JS计算两个时间相差分钟数的方法示例
2018/01/10 Javascript
使用Angular-CLI构建NPM包的方法
2018/09/07 Javascript
vue中filters 传入两个参数 / 使用两个filters的实现方法
2019/07/15 Javascript
JS实现灯泡开关特效
2020/03/30 Javascript
微信小程序的引导页实现代码
2020/06/24 Javascript
python求素数示例分享
2014/02/16 Python
Python实现的一个找零钱的小程序代码分享
2014/08/25 Python
Python基于pygame实现的font游戏字体(附源码)
2015/11/11 Python
python贪婪匹配以及多行匹配的实例讲解
2018/04/19 Python
python中字符串内置函数的用法总结
2018/09/13 Python
Python产生Gnuplot绘图数据的方法
2018/11/09 Python
详解利用Python scipy.signal.filtfilt() 实现信号滤波
2019/06/05 Python
Python3+Appium安装使用教程
2019/07/05 Python
Python使用requests xpath 并开启多线程爬取西刺代理ip实例
2020/03/06 Python
编写一子程序,将一链表倒序,即使链表表尾变表头,表头变表尾
2016/02/10 面试题
nohup的用法
2014/08/10 面试题
最新销售员个人自荐信
2013/09/21 职场文书
座谈会主持词
2014/03/20 职场文书
街道办残联2016年助残日活动总结
2016/04/01 职场文书
mysql sum(if())和count(if())的用法说明
2022/01/18 MySQL