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 相关文章推荐
JQuery 选项卡效果(JS与HTML的分离)
Apr 01 Javascript
基于jquery封装的一个js分页
Nov 15 Javascript
JavaScript版DateAdd和DateDiff函数代码
Mar 01 Javascript
jQuery实现带滚动导航效果的全屏滚动相册实例
Jun 19 Javascript
javascript生成不重复的随机数
Jul 17 Javascript
JavaScript实现的浮动层框架用法实例分析
Oct 10 Javascript
JavaScript如何动态创建table表格
Aug 02 Javascript
在原生不支持的旧环境中添加兼容的Object.keys实现方法
Sep 11 Javascript
fetch 使用及如何接收JS传值
Nov 11 Javascript
浅谈react性能优化的方法
Sep 05 Javascript
基于Express框架使用POST传递Form数据
Aug 10 Javascript
详解json串反转义(消除反斜杠)
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
php网上商城购物车设计代码分享
2012/02/15 PHP
如何运行/调试你的PHP代码
2020/10/23 PHP
在Javascript中定义对象类别
2006/12/22 Javascript
Jquery 数组操作大全个人总结
2013/11/13 Javascript
jquery五角星评分插件示例分享
2014/02/21 Javascript
javascript中with()方法的语法格式及使用
2014/08/04 Javascript
jQuery实现瀑布流布局详解(PC和移动端)
2020/09/01 Javascript
js实现无缝循环滚动
2020/06/23 Javascript
jquery中用jsonp实现搜索框功能
2016/10/18 Javascript
jQuery插件WebUploader实现文件上传
2016/11/07 Javascript
Vuex 进阶之模块化组织详解
2018/01/12 Javascript
通过函数作用域和块级作用域看javascript的作用域链
2018/08/05 Javascript
微信小程序canvas.drawImage完全显示图片问题的解决
2018/11/30 Javascript
微信小程序如何调用新闻接口实现列表循环
2019/07/02 Javascript
在node环境下parse Smarty模板的使用示例代码
2019/11/15 Javascript
node.js中process进程的概念和child_process子进程模块的使用方法示例
2020/02/11 Javascript
原生JS实现贪吃蛇小游戏
2020/03/09 Javascript
mapboxgl实现带箭头轨迹线的代码
2021/01/04 Javascript
python sys模块sys.path使用方法示例
2013/12/04 Python
用ReactJS和Python的Flask框架编写留言板的代码示例
2015/12/19 Python
老生常谈Python之装饰器、迭代器和生成器
2017/07/26 Python
python多进程控制学习小结
2018/10/31 Python
Pyqt5 基本界面组件之inputDialog的使用
2019/06/25 Python
Python如何使用Gitlab API实现批量的合并分支
2019/11/27 Python
Python日志syslog使用原理详解
2020/02/18 Python
Python获取android设备cpu和内存占用情况
2020/11/15 Python
维珍澳洲航空官网:Virgin Australia
2017/09/08 全球购物
香蕉共和国工厂店:Banana Republic Factory
2018/06/09 全球购物
数百万免费的图形资源:Freepik
2020/09/21 全球购物
如何利用XMLHTTP检测URL及探测服务器信息
2013/11/10 面试题
合作意向协议书范本
2014/03/31 职场文书
纪念九一八事变演讲稿:青少年应树立远大理想
2014/09/14 职场文书
干部作风整顿个人剖析材料
2014/10/06 职场文书
实习生辞职信范文
2015/03/02 职场文书
2016特色励志班级口号
2015/12/24 职场文书
Java获取e.printStackTrace()打印的信息方式
2021/08/07 Java/Android