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 相关文章推荐
jQuery 操作XML入门
Dec 25 Javascript
JavaScript 对象模型 执行模型
Dec 06 Javascript
Microsoft Ajax Minifier 压缩javascript的方法
Mar 05 Javascript
js获取事件源及触发该事件的对象
Oct 24 Javascript
jQuery中复合属性选择器用法实例
Dec 31 Javascript
常用的JQuery函数及功能小结
Mar 24 Javascript
jQuery与JS加载事件用法分析
Sep 04 Javascript
利用Vue.js框架实现火车票查询系统(附源码)
Feb 27 Javascript
利用JS hash制作单页Web应用的方法详解
Oct 10 Javascript
基于vue-resource jsonp跨域问题的解决方法
Feb 03 Javascript
VUE实现强制渲染,强制更新
Oct 29 Javascript
详解JavaScript的计时器和按钮效果设置
Feb 18 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 FPDF类库应用实现代码
2009/03/20 PHP
PHP中多维数组的foreach遍历示例
2014/06/13 PHP
php实现三级级联下拉框
2016/04/17 PHP
可兼容IE的获取及设置cookie的jquery.cookie函数方法
2013/09/02 Javascript
JS+DIV实现鼠标划过切换层效果的实例代码
2013/11/26 Javascript
js与jquery获取父级元素,子级元素,兄弟元素的实现方法
2014/01/09 Javascript
jQuery常用操作方法及常用函数总结
2014/06/19 Javascript
jQuery关键词说明插件cluetip使用指南
2015/04/21 Javascript
js同源策略详解
2015/05/21 Javascript
jQuery使用$.ajax进行即时验证实例详解
2015/12/11 Javascript
JQuery PHP图片在线裁剪实例
2020/07/27 Javascript
使用Ajax与服务器(JSON)通信实例
2016/11/04 Javascript
详解jQuery简单的表格应用
2016/12/16 Javascript
使用bootstraptable插件实现表格记录的查询、分页、排序操作
2017/08/06 Javascript
通过一个简单的例子学会vuex与模块化
2017/11/22 Javascript
webpack3升级到webpack4遇到问题总结
2019/09/30 Javascript
Python的Tornado框架异步编程入门实例
2015/04/24 Python
利用Python脚本在Nginx和uwsgi上部署MoinMoin的教程
2015/05/05 Python
Python实现读取文件最后n行的方法
2017/02/23 Python
Python入门之三角函数atan2()函数详解
2017/11/08 Python
解决python使用open打开文件中文乱码的问题
2017/12/29 Python
对python 树状嵌套结构的实现思路详解
2019/08/09 Python
python设置代理和添加镜像源的方法
2020/02/14 Python
细说CSS3中的选择符
2008/10/17 HTML / CSS
皮尔·卡丹巴西官方商店:Pierre Cardin
2017/07/21 全球购物
安踏官方商城:anta.cn
2019/12/16 全球购物
公司前台辞职报告
2014/01/19 职场文书
交通事故协议书
2014/04/15 职场文书
自强自立美德少年事迹材料
2014/08/16 职场文书
地道战观后感500字
2015/06/04 职场文书
六一儿童节致辞
2015/07/31 职场文书
学生病假条怎么写
2015/08/17 职场文书
简短清晨问候语
2015/11/10 职场文书
vue使用v-model进行跨组件绑定的基本实现方法
2021/04/28 Vue.js
CSS实现九宫格布局(自适应)的示例代码
2022/02/12 HTML / CSS
Python中的协程(Coroutine)操作模块(greenlet、gevent)
2022/05/30 Python