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 相关文章推荐
DOM和XMLHttpRequest对象的属性和方法整理
Jan 04 Javascript
基于jquery的鼠标拖动效果代码
May 30 Javascript
实现checkbox全选、反选、取消JavaScript小脚本异常
Apr 10 Javascript
原生javascript实现的分页插件pagenav
Aug 28 Javascript
JavaScript中消除闭包的一般方法介绍
Mar 16 Javascript
全面解析Bootstrap表单使用方法(表单样式)
Nov 24 Javascript
详解JavaScript的AngularJS框架中的表达式与指令
Mar 05 Javascript
AngularJS基于ui-route实现深层路由的方法【路由嵌套】
Dec 14 Javascript
jQuery如何跳转到另一个网页 就这么简单
Dec 28 Javascript
underscore之Chaining_动力节点Java学院整理
Jul 10 Javascript
微信小程序中使用wxss加载图片并实现动画效果
Aug 13 Javascript
在vue-cli 3中给stylus、sass样式传入共享的全局变量
Aug 12 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
删除及到期域名的查看(抢域名必备哦)
2008/05/14 PHP
基于simple_html_dom的使用小结
2013/07/01 PHP
Zend Framework教程之MVC框架的Controller用法分析
2016/03/07 PHP
Eclipse PHPEclipse 配置的具体步骤
2017/08/08 PHP
js 深拷贝函数
2008/12/04 Javascript
JavaScript入门教程 Cookies
2009/01/31 Javascript
jquery获取iframe中的dom对象(两种方法)
2013/07/02 Javascript
javascript中setTimeout的问题解决方法
2014/05/08 Javascript
js仿土豆网带缩略图的焦点图片切换效果实现方法
2015/02/23 Javascript
jQuery Easyui学习之datagrid 动态添加、移除editor
2016/01/27 Javascript
jQuery 检查某个元素在页面上是否存在实例代码
2016/10/27 Javascript
VUE JS 使用组件实现双向绑定的示例代码
2017/01/10 Javascript
Vue自定义事件(详解)
2017/08/19 Javascript
JavaScript日期工具类DateUtils定义与用法示例
2018/09/03 Javascript
使用 node.js 模仿 Apache 小部分功能
2019/07/07 Javascript
解决一个微信号同时支持多个环境网页授权问题
2019/08/07 Javascript
JavaScript闭包原理与用法学习笔记
2020/05/29 Javascript
Python splitlines使用技巧
2008/09/06 Python
py2exe 编译ico图标的代码
2013/03/08 Python
详解python中asyncio模块
2018/03/03 Python
Python实现爬虫爬取NBA数据功能示例
2018/05/28 Python
python实现判断一个字符串是否是合法IP地址的示例
2018/06/04 Python
Python自定义一个类实现字典dict功能的方法
2019/01/19 Python
元组列表字典(莫烦python基础)
2019/04/03 Python
利用matplotlib实现根据实时数据动态更新图形
2019/12/13 Python
泰国国际航空公司官网:Thai Airways International
2019/12/04 全球购物
大学生饮食连锁店创业计划书
2014/01/17 职场文书
光荣入党自我鉴定
2014/01/22 职场文书
妈妈的账单教学反思
2014/02/06 职场文书
办公室员工岗位工作职责
2014/03/10 职场文书
应聘会计求职信
2014/06/11 职场文书
小浪底导游词
2015/02/12 职场文书
2016年青少年禁毒宣传教育活动总结(学校)
2016/04/05 职场文书
css3 实现文字闪烁效果的三种方式示例代码
2021/04/25 HTML / CSS
tensorflow+k-means聚类简单实现猫狗图像分类的方法
2021/04/28 Python
Python快速优雅的批量修改Word文档样式
2021/05/20 Python