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 脚本将当地时间转换成其它时区
Mar 19 Javascript
location.search在客户端获取Url参数的方法
Jun 08 Javascript
myeclipse安装jQuery插件的方法
Mar 29 Javascript
使用jQuery动态加载js脚本文件的方法
Apr 03 Javascript
JS+DIV实现鼠标划过切换层效果的方法
May 25 Javascript
JavaScript实现阿拉伯数字和中文数字互相转换
Jun 12 Javascript
JS原型对象的创建方法详解
Jun 16 Javascript
Ajax与服务器(JSON)通信实例代码
Nov 05 Javascript
jQuery插件zTree实现获取一级节点数据的方法
Mar 08 Javascript
jQuery遍历节点方法汇总(推荐)
May 13 jQuery
vue(2.x,3.0)配置跨域代理
Nov 27 Javascript
vue3语法糖内的defineProps及defineEmits
Apr 14 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的数组中提高元素查找与元素去重的效率的技巧解析
2016/03/03 PHP
PHP面向对象中new self()与 new static()的区别浅析
2017/08/17 PHP
PHP获取本周所有日期或者最近七天所有日期的方法
2018/06/20 PHP
php实现推荐功能的简单实例
2019/09/29 PHP
PHP中用Trait封装单例模式的实现
2019/12/18 PHP
PHP7 参数处理机制修改
2021/03/09 PHP
经典的带阴影的可拖动的浮动层
2006/06/26 Javascript
用 Javascript 验证表单(form)中多选框(checkbox)值
2009/09/08 Javascript
详解JavaScript中常用的函数类型
2015/11/18 Javascript
jQuery增加和删除表格项目及实现表格项目排序的方法
2016/05/30 Javascript
Javascript之String对象详解
2016/06/08 Javascript
详解JS模块导入导出
2017/12/20 Javascript
Servlet3.0与纯javascript通过Ajax交互的实例详解
2018/03/18 Javascript
详解vue项目中调用百度地图API使用方法
2019/04/25 Javascript
ES6中异步对象Promise用法详解
2019/07/31 Javascript
在Vue里如何把网页的数据导出到Excel的方法
2020/09/30 Javascript
王纯业的Python学习笔记 下载
2007/02/10 Python
python基础教程之面向对象的一些概念
2014/08/29 Python
深入讲解Java编程中类的生命周期
2016/02/05 Python
Python实现读取TXT文件数据并存进内置数据库SQLite3的方法
2017/08/08 Python
给你选择Python语言实现机器学习算法的三大理由
2017/11/15 Python
pandas DataFrame的修改方法(值、列、索引)
2019/08/02 Python
Python中*args和**kwargs的区别详解
2019/09/17 Python
你不知道的5个HTML5新功能
2016/06/28 HTML / CSS
HTML5 weui使用笔记
2019/11/21 HTML / CSS
美国正版电视节目和电影在线观看:Hulu
2018/05/24 全球购物
期末总结的个人自我评价
2013/11/02 职场文书
农村婚礼主持词
2014/03/13 职场文书
2014年大学生四年规划书范文
2014/04/03 职场文书
学习十八届四中全会精神思想汇报
2014/10/23 职场文书
乡镇2014法制宣传日活动总结
2014/11/01 职场文书
2014年大学学生会工作总结
2014/12/02 职场文书
医务人员医德考评自我评价
2015/03/03 职场文书
家庭暴力离婚起诉书
2015/05/18 职场文书
高一数学教学反思
2016/02/18 职场文书
职业规划从高考志愿专业选择开始
2019/08/08 职场文书