Prototype ObjectRange对象学习


Posted in Javascript onJuly 19, 2009

Ranges represent an interval of values. The value type just needs to be “compatible,” that is, to implement a succ method letting us step from one value to the next (its successor).

Prototype provides such a method for Number and String, but you are of course welcome to implement useful semantics in your own objects, in order to enable ranges based on them.

ObjectRange对象基本就是实现了连续的数字或者字符串,其中只包含一个方法,include,判断某个数字或者字符串是否在ObjectRange里。并且ObjectRange对象还混入了Enumerable的方法,所以可以直接在ObjectRange对象上调用Enumerable对象里面的方法。

//创建ObjectRange的便捷方法 
function $R(start, end, exclusive) { 
return new ObjectRange(start, end, exclusive); 
} //创建ObjectRange对象并且继承自Enumerable 
var ObjectRange = Class.create(Enumerable, (function() { 
    //初始化方法,exclusive为true时,不包含end数值,默认为undefined也就相当于false 
function initialize(start, end, exclusive) { 
this.start = start; 
this.end = end; 
this.exclusive = exclusive; 
} 
//覆盖Enumerable里面的_each方法,在遍历ObjectRange对象时需要用到此方法 
function _each(iterator) { 
var value = this.start; 
while (this.include(value)) { 
iterator(value); 
value = value.succ(); 
} 
} 
//判断某个数值或者字符串是否包含在ObjectRange对象里 
function include(value) { 
if (value < this.start) 
return false; 
if (this.exclusive) 
return value < this.end; 
return value <= this.end; 
} 
return { 
initialize: initialize, 
_each: _each, 
include: include 
}; 
})());

看一下示例,然后在详细解释一些细节:
$A($R('a', 'e')) 
// -> ['a', 'b', 'c', 'd', 'e'], no surprise there //千万不要尝试输出下面返回的结果,否者将会造成浏览器直接死掉 
$A($R('ax', 'ba')) 
// -> Ouch! Humongous array, starting as ['ax', 'ay', 'az', 'a{', 'a|', 'a}', 'a~'...]

这里说一下$A($R('a', 'e')),如何返回值。首先看$A方法,前面的文章【Prototype 学习——工具函数学习($A方法)】中已经详细讲解了$A方法,不知道请自行参考。在$A方法里面有这样一句:if ('toArray' in Object(iterable)) return iterable.toArray();我们知道,ObjectRange里面混入了Enumerable里面的方法,也就是说间接实现了toArray方法,那么看一下Enumerable里面的toArray方法:
function toArray() { 
return this.map(); 
} //======> this.map() 
//我们注意到在返回的时候map方法被映射到了collect方法 
return { 
//... 
collect: collect, 
map: collect, 
//... 
} 
//======> collect() 
//在本例中这个方法其实就相当于返回一个数组,因为传进来的参数都是undefined。这里面有一个this.each方法,继续查看 
function collect(iterator, context) { 
iterator = iterator || Prototype.K; 
var results = []; 
this.each(function(value, index) { 
results.push(iterator.call(context, value, index)); 
}); 
return results; 
} 
//======> this.each() 
//终于看到this._each了,现在明白为什么ObjectRange里面会重写了_each方法了吧。在遍历的时候要用到这个方法 
function each(iterator, context) { 
var index = 0; 
try { 
this._each(function(value) { 
iterator.call(context, value, index++); 
}); 
} catch (e) { 
if (e != $break) throw e; 
} 
return this; 
} 
//======> this._each() 
//详细说明一下this._each() 
//关键就是succ()这个方法,因为_each里面使用这个方法产生下一个数值。 
//这个succ()在哪里呢?在Number.prototype和String.prototype里面定义了这个方法 
function _each(iterator) { 
var value = this.start; 
while (this.include(value)) { 
iterator(value); 
value = value.succ(); 
} 
} 
//下面两个方法我就不讲了吧。 
//======> String.prototype.succ() 
function succ() { 
return this.slice(0, this.length - 1) + 
String.fromCharCode(this.charCodeAt(this.length - 1) + 1); 
} 
//======> Number.prototype.succ() 
function succ() { 
return this + 1; 
} 
//综上所述,如果你自己想定义其它类型的ObjectRange对象,譬如Date类型,那么你就要自己实现succ()方法,用来生成连续的对象

上面的流程将清楚了,但一些函数没有仔细讲,等讲到这些对象的时候在仔细说明里面的函数。下面看几个include的示例吧:
$R(1, 10).include(5) 
// -> true 
$R('a', 'h').include('x') 
// -> false 
$R(1, 10).include(10) 
// -> true 
$R(1, 10, true).include(10) 
// -> false
Javascript 相关文章推荐
javascript针对DOM的应用分析(三)
Apr 15 Javascript
web性能优化之javascript性能调优
Dec 28 Javascript
Jquery常用的方法汇总
Sep 01 Javascript
谈谈Jquery中的children find 的区别有哪些
Oct 19 Javascript
FullCalendar日历插件应用之数据展现(一)
Dec 23 Javascript
js密码强度检测
Jan 07 Javascript
jQuery如何获取动态添加的元素
Jun 24 Javascript
详解JavaScript的闭包、IIFE、apply、函数与对象
Dec 21 Javascript
Angular实现的简单定时器功能示例
Dec 28 Javascript
微信小程序实现搜索指定景点周边美食、酒店
May 18 Javascript
H5+css3+js搭建带验证码的登录页面
Oct 11 Javascript
vue 实现基础组件的自动化全局注册
Dec 25 Vue.js
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
比较简单的异步加载JS文件的代码
Jul 18 #Javascript
用showModalDialog弹出页面后,提交表单总是弹出一个新窗口
Jul 18 #Javascript
You might like
php中CI操作多个数据库的代码
2012/07/05 PHP
php解析http获取的json字符串变量总是空白null
2015/03/02 PHP
总结一些PHP中好用但又容易忽略的小知识
2017/06/02 PHP
在JavaScript中获取请求的URL参数
2010/12/22 Javascript
JQUERY dialog的用法详细解析
2013/12/19 Javascript
jQuery实现textarea自动增长宽高的方法
2015/12/18 Javascript
判断数组的最佳方法(推荐)
2016/10/11 Javascript
js使用原型对象(prototype)需要注意的地方
2017/08/28 Javascript
js实现图片局部放大效果详解
2019/03/18 Javascript
解决layui数据表格table的横向滚动条显示问题
2019/09/04 Javascript
layer.js之回调销毁对话框的例子
2019/09/11 Javascript
微信小程序scroll-view的滚动条设置实现
2020/03/02 Javascript
RxJS在TypeScript中的简单使用详解
2020/04/13 Javascript
基于Python的接口测试框架实例
2016/11/04 Python
Python md5与sha1加密算法用法分析
2017/07/14 Python
Python中如何使用if语句处理列表实例代码
2019/02/24 Python
python 随机生成10位数密码的实现代码
2019/06/27 Python
Python实现计算对象的内存大小示例
2019/07/10 Python
python 画出使用分类器得到的决策边界
2019/08/21 Python
在OpenCV里实现条码区域识别的方法示例
2019/12/04 Python
基于python3抓取pinpoint应用信息入库
2020/01/08 Python
代码总结Python2 和 Python3 字符串的区别
2020/01/28 Python
django model通过字典更新数据实例
2020/04/01 Python
Python 线性回归分析以及评价指标详解
2020/04/02 Python
利用CSS3实现进度条的两种姿势详解
2017/03/21 HTML / CSS
屈臣氏马来西亚官网:Watsons马来西亚
2019/06/15 全球购物
Huda Beauty官方商店:化妆和美容产品
2020/09/05 全球购物
办公室副主任岗位职责
2013/11/25 职场文书
女儿十岁生日答谢词
2014/01/27 职场文书
逃课上网检讨书
2014/02/20 职场文书
管事部库房保管员岗位职责
2014/02/21 职场文书
工作时间调整通知
2015/04/24 职场文书
团拜会主持词
2015/07/04 职场文书
PySwarms(Python粒子群优化工具包)的使用:GlobalBestPSO例子解析
2021/04/05 Python
HTML中table表格拆分合并(colspan、rowspan)
2021/04/07 HTML / CSS
解决persistence.xml配置文件修改存放路径的问题
2022/02/24 Java/Android