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高亮效果的二种实现方法
Sep 14 Javascript
查找Oracle高消耗语句的方法
Mar 22 Javascript
js实现网页随机切换背景图片的方法
Nov 01 Javascript
使用jquery动态加载js文件的方法
Dec 24 Javascript
JavaScript中的some()方法使用详解
Jun 09 Javascript
解析Node.js基于模块和包的代码部署方式
Feb 16 Javascript
jQuery 监控键盘一段时间没输入
Apr 22 Javascript
AngularJS基础 ng-paste 指令简单示例
Aug 02 Javascript
JavaScript常用正则函数用法示例
Jan 23 Javascript
JS计算距当前时间的时间差实例
Dec 29 Javascript
将Vue组件库更换为按需加载的方法步骤
May 06 Javascript
如何理解Vue简单状态管理之store模式
May 15 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 $_FILES函数详解
2011/03/09 PHP
php htmlspecialchars()与shtmlspecialchars()函数的深入分析
2013/06/05 PHP
thinkphp实现多语言功能(语言包)
2014/03/04 PHP
WordPress分页伪静态加html后缀
2016/06/08 PHP
php+js实现百度地图多点标注的方法
2016/11/30 PHP
简单谈谈 php 文件锁
2017/02/19 PHP
推荐30个新鲜出炉的精美 jQuery 效果
2012/03/26 Javascript
js 限制input只能输入数字、字母和汉字等等
2013/12/18 Javascript
jQuery实现的Tab滑动选项卡及图片切换(多种效果)小结
2015/09/14 Javascript
JavaScript操作HTML元素和样式的方法详解
2015/10/21 Javascript
jQuery的ajax和遍历数组json实例代码
2016/08/01 Javascript
学习Javascript闭包(Closure)知识
2016/08/07 Javascript
微信小程序 弹窗自定义实例代码
2017/03/08 Javascript
基于bootstrap实现bootstrap中文网巨幕效果
2017/05/02 Javascript
Angular4表单验证代码详解
2017/09/03 Javascript
vue自定义键盘信息、监听数据变化的方法示例【基于vm.$watch】
2019/03/16 Javascript
Vue运用transition实现过渡动画
2019/05/06 Javascript
微信小程序的线程架构【推荐】
2019/05/14 Javascript
jquery插件开发模式实例详解
2019/07/20 jQuery
python网页请求urllib2模块简单封装代码
2014/02/07 Python
web.py中调用文件夹内模板的方法
2014/08/26 Python
Django框架使用mysql视图操作示例
2019/05/15 Python
python使用openpyxl操作excel的方法步骤
2020/05/28 Python
python 利用百度API识别图片文字(多线程版)
2020/12/14 Python
Swisse官方海外旗舰店:澳大利亚销量领先,自然健康品牌
2017/12/15 全球购物
美国购物网站:Clickhere2shop
2021/01/28 全球购物
销售自我评价
2013/10/22 职场文书
个人实习生的自我评价
2014/02/16 职场文书
《骑牛比赛》教后反思
2014/04/22 职场文书
含预算的公司户外活动方案
2014/08/16 职场文书
人身损害赔偿协议书格式
2014/11/01 职场文书
三年级学生期末评语
2014/12/26 职场文书
高校教师个人总结
2015/02/10 职场文书
个人优缺点总结
2015/02/28 职场文书
刑事附带民事上诉状
2015/05/23 职场文书
民事诉讼代理词
2015/05/25 职场文书