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 firefox兼容ie的dom方法脚本
May 18 Javascript
javascript之querySelector和querySelectorAll使用说明
Oct 09 Javascript
用Jquery选择器计算table中的某一列某一行的合计
Aug 13 Javascript
js 定义对象数组(结合)多维数组方法
Jul 27 Javascript
AngularJS基础 ng-focus 指令简单示例
Aug 01 Javascript
javascript验证内容为数字以及长度为10的简单实例
Aug 20 Javascript
JavaScript中常用的验证reg
Oct 13 Javascript
Vue数据驱动模拟实现4
Jan 12 Javascript
JavaScript实现瀑布流以及加载效果
Feb 11 Javascript
基于JavaScript实现百度搜索框效果
Jun 28 Javascript
浅谈javascript错误处理
Aug 11 Javascript
JS中间件设计模式的深入探讨与实例分析
Apr 11 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
比较简单的异步加载JS文件的代码
Jul 18 #Javascript
用showModalDialog弹出页面后,提交表单总是弹出一个新窗口
Jul 18 #Javascript
You might like
日本十大最佳动漫,全都是二次元的神级作品
2019/10/05 日漫
乐信RP2100的电路分析和打磨
2021/03/02 无线电
在普通HTTP上安全地传输密码
2007/07/21 PHP
PHP中HTML标签过滤技巧
2014/01/07 PHP
CodeIgniter中使用cookie的三种方式详解
2014/07/18 PHP
ThinkPHP基于PHPExcel导入Excel文件的方法
2014/10/15 PHP
PHP实现的文件操作类及文件下载功能示例
2016/12/24 PHP
js中top、clientTop、scrollTop、offsetTop的区别 文字详细说明版
2011/01/08 Javascript
利用javascript解决图片缩放及其优化的代码
2012/05/23 Javascript
Chosen 基于jquery的选择框插件使用方法
2012/05/30 Javascript
js实现遮罩层划出效果是生成div而不是显示
2014/07/29 Javascript
JavaScript中定义类的方式详解
2016/01/07 Javascript
学习Node.js模块机制
2016/10/17 Javascript
JS多物体实现缓冲运动效果示例
2016/12/20 Javascript
bootstrap手风琴制作方法详解
2017/01/11 Javascript
jQuery.Form上传文件操作
2017/02/05 Javascript
JS操作xml对象转换为Json对象示例
2017/03/25 Javascript
用p5.js制作烟花特效的示例代码
2018/03/21 Javascript
vue读取本地的excel文件并显示在网页上方法示例
2019/05/29 Javascript
基于ID3决策树算法的实现(Python版)
2017/05/31 Python
Python爬虫中urllib库的进阶学习
2018/01/05 Python
Python爬虫包BeautifulSoup学习实例(五)
2018/06/17 Python
Python实现二叉树前序、中序、后序及层次遍历示例代码
2019/05/18 Python
PyQt5 多窗口连接实例
2019/06/19 Python
Python selenium抓取虎牙短视频代码实例
2020/03/02 Python
Python startswith()和endswith() 方法原理解析
2020/04/28 Python
python读取图像矩阵文件并转换为向量实例
2020/06/18 Python
CSS3 选择器 基本选择器介绍
2012/01/21 HTML / CSS
行政经理的岗位职责
2013/11/23 职场文书
学校消防安全制度
2014/01/30 职场文书
大学计划书范文800字
2014/08/14 职场文书
2014年幼儿园园长工作总结
2014/12/17 职场文书
2015年新农合工作总结
2015/03/30 职场文书
2015年领导干部廉洁自律工作总结
2015/05/26 职场文书
小学同学聚会感言
2015/07/30 职场文书
《坐井观天》教学反思
2016/02/18 职场文书