当前位置: 开发笔记 > 前端 > 正文

PrototypeEnumerable对象学习第1/2页

作者：周俪劳伦瑶的瑶 | 来源：互联网 | 2022-01-06 07:38

Enumerable是Prototype框架的基石，而Enumerable不单独使用，在Prototype中其它对象mix了Enumerable里面的方法，这样就可以在这些对象上应用Enumerable的方法，这样的对象有：Array，Hash，ObjectRange，还有一些和DOM，AJAX相关的对象。

Enumerable provides a large set of useful methods for enumerations, that is, objects that act as collections of values. It is a cornerstone of Prototype.

Enumerable is what we like to call a module: a consistent set of methods intended not for independent use, but for mixin: incorporation into other objects that “fit” with it.

Quite a few objects, in Prototype, mix Enumerable in already. The most visible cases are Array and Hash, but you'll find it in less obvious spots as well, such as in ObjectRange and various DOM- or AJAX-related objects.

上面这短话的意思大概就是说Enumerable是Prototype框架的基石，而Enumerable不单独使用，在Prototype中其它对象mix了Enumerable里面的方法，这样就可以在这些对象上应用Enumerable的方法，这样的对象有：Array，Hash，ObjectRange，还有一些和DOM，AJAX相关的对象。
个人理解Enumerable相当于C++中的抽象类的概念，其它类可以继承自这个类，并且实现Enumerable里面的抽象方法"_each"，并且可以覆盖其它的方法，而Enumerable本身却不可以实例化，只可以实例化它的子类。
下面看一下如何通过Enumerable来写自己的类：

代码如下:

var YourObject = Class.create(); 
Object.extend(YourObject.prototype, Enumerable); Object.extend(YourObject.prototype, { 
initialize: function() { 
// with whatever constructor arguments you need 
// Your construction code 
}, 
_each: function(iterator) { 
// Your iteration code, invoking iterator at every turn 
}, 
// Your other methods here, including Enumerable overrides 
});

可以看出最重要的就是实现_each方法，initialize方法就相当于构造函数，如果不需要外部传进来什么参数，完全可以省略。下面我自己写了一个产生随机数数组的类，非常简单，有许多不完善的地方，这里只做演示用：

代码如下:

//创建RandomArray类 
var RandomArray = Class.create(); 
//mixin Enumerable 
Object.extend(RandomArray.prototype, Enumerable); 
//实现_each和所需方法 
Object.extend(RandomArray.prototype, { 
    initialize: function(min,max,count) { 
        this.min=min; 
        this.max=max; 
        this.count=count; 
        this._numbers=[]; 
        this._createRandomArray(); 
    }, 
    _each: function(iterator) { 
        var index=this.count; 
        while(index-->0){ 
            iterator(this._numbers[index]); 
        } 
    }, 
//产生随机数数组 
    _createRandomArray:function(){ 
        var index=0; 
        while(index            var random=Math.round(Math.random()*(this.max-this.min)+this.min); 
            if(this.include(random)){ 
                continue; 
            } 
            this._numbers[index++]=random; 
        } 
    }, 
    include:function(number){ 
        return this._numbers.indexOf(number)!=-1; 
    } 
}); 

var obj = new RandomArray(4,19,5); 
//alert(obj.size()); 
alert(obj.entries());

看一下Enumerable的源码，然后具体学习其中的每个方法：

代码如下:

var $break = { }; 

var Enumerable = (function() { 
//遍历每个数据 
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; 
} 

//把数据划分成N组，其中每组有number个数，最后一组可能小于number个数 
function eachSlice(number, iterator, context) { 
var index = -number, slices = [], array = this.toArray(); 
if (number <1) return array; 
while ((index += number) slices.push(array.slice(index, index+number)); 
return slices.collect(iterator, context); 
} 

//测试是否所有数据都满足某个条件 
function all(iterator, context) { 
iterator = iterator || Prototype.K; 
var result = true; 
this.each(function(value, index) { 
result = result && !!iterator.call(context, value, index); 
if (!result) throw $break; 
}); 
return result; 
} 

//检查是否有任意一个数据满足某个条件 
function any(iterator, context) { 
iterator = iterator || Prototype.K; 
var result = false; 
this.each(function(value, index) { 
if (result = !!iterator.call(context, value, index)) 
throw $break; 
}); 
return result; 
} 

//可以对所有数据进行任何操作，并返回结果数组 
function collect(iterator, context) { 
iterator = iterator || Prototype.K; 
var results = []; 
this.each(function(value, index) { 
results.push(iterator.call(context, value, index)); 
}); 
return results; 
} 

//查找第一个满足某个条件的数据，并返回，相当于find方法的别名 
function detect(iterator, context) { 
var result; 
this.each(function(value, index) { 
if (iterator.call(context, value, index)) { 
result = value; 
throw $break; 
} 
}); 
return result; 
} 

//查找所有满足某个条件的数据，并返回结果 
function findAll(iterator, context) { 
var results = []; 
this.each(function(value, index) { 
if (iterator.call(context, value, index)) 
results.push(value); 
}); 
return results; 
} 

//根据filter条件过滤所有数据，找到满足filter条件的数据，并返回结果 
//filter为字符串或者正则表达式 
function grep(filter, iterator, context) { 
iterator = iterator || Prototype.K; 
var results = []; 

if (Object.isString(filter)) 
filter = new RegExp(RegExp.escape(filter)); 

this.each(function(value, index) { 
if (filter.match(value)) 
results.push(iterator.call(context, value, index)); 
}); 
return results; 
} 

//检查是否包含某个数据 
function include(object) { 
if (Object.isFunction(this.indexOf)) 
if (this.indexOf(object) != -1) return true; 

var found = false; 
this.each(function(value) { 
if (value == object) { 
found = true; 
throw $break; 
} 
}); 
return found; 
} 

//和eachSlice方法类似，如果最后一组元素个数不足number，则用fillWith参数填充 
function inGroupsOf(number, fillWith) { 
fillWith = Object.isUndefined(fillWith) ? null : fillWith; 
return this.eachSlice(number, function(slice) { 
while(slice.length return slice; 
}); 
} 

//对所有数据连续进行某个操作，可以实现累加或者累乘等操作 
function inject(memo, iterator, context) { 
this.each(function(value, index) { 
memo = iterator.call(context, memo, value, index); 
}); 
return memo; 
} 

//在所有数据上执行某个方法 
function invoke(method) { 
var args = $A(arguments).slice(1); 
return this.map(function(value) { 
return value[method].apply(value, args); 
}); 
} 

//找数据中的最大值 
function max(iterator, context) { 
iterator = iterator || Prototype.K; 
var result; 
this.each(function(value, index) { 
value = iterator.call(context, value, index); 
if (result == null || value >= result) 
result = value; 
}); 
return result; 
} 

//找数据中的最小值 
function min(iterator, context) { 
iterator = iterator || Prototype.K; 
var result; 
this.each(function(value, index) { 
value = iterator.call(context, value, index); 
if (result == null || value result = value; 
}); 
return result; 
} 

//把所有数据一分为二，第一组为满足某个条件的数据，第二组为不满足条件的数据 
function partition(iterator, context) { 
iterator = iterator || Prototype.K; 
var trues = [], falses = []; 
this.each(function(value, index) { 
(iterator.call(context, value, index) ? 
trues : falses).push(value); 
}); 
return [trues, falses]; 
} 

//取出所有数据的property的值，并返回结果 
function pluck(property) { 
var results = []; 
this.each(function(value) { 
results.push(value[property]); 
}); 
return results; 
} 

//找到不满足某个条件的数据 
function reject(iterator, context) { 
var results = []; 
this.each(function(value, index) { 
if (!iterator.call(context, value, index)) 
results.push(value); 
}); 
return results; 
} 

//根据某个条件对所有数据进行排序 
function sortBy(iterator, context) { 
return this.map(function(value, index) { 
return { 
value: value, 
criteria: iterator.call(context, value, index) 
}; 
}).sort(function(left, right) { 
var a = left.criteria, b = right.criteria; 
return a  b ? 1 : 0; 
}).pluck('value'); 
} 

//返回数据的数组表示形式 
function toArray() { 
return this.map(); 
} 

//基本就是把两组数据放在一起进行某些操作 
function zip() { 
var iterator = Prototype.K, args = $A(arguments); 
if (Object.isFunction(args.last())) 
iterator = args.pop(); 

var collectiOns= [this].concat(args).map($A); 
return this.map(function(value, index) { 
return iterator(collections.pluck(index)); 
}); 
} 

function size() { 
return this.toArray().length; 
} 

//返回表示Enumerable对象的字符串表示形式 
function inspect() { 
return '#'; 
} 

return { 
each: each, 
eachSlice: eachSlice, 
all: all, 
every: all, 
any: any, 
some: any, 
collect: collect, 
map: collect, 
detect: detect, 
findAll: findAll, 
select: findAll, 
filter: findAll, 
grep: grep, 
include: include, 
member: include, 
inGroupsOf: inGroupsOf, 
inject: inject, 
invoke: invoke, 
max: max, 
min: min, 
partition: partition, 
pluck: pluck, 
reject: reject, 
sortBy: sortBy, 
toArray: toArray, 
entries: toArray, 
zip: zip, 
size: size, 
inspect: inspect, 
find: detect 
}; 
})();

下面学习Enumerable所提供的方法：

all
any
collect
detect
each
eachSlice
entries
find
findAll
grep
inGroupsOf
include
inject
invoke
map
max
member
min
partition
pluck
reject
select
size
sortBy
toArray
zip
all方法：

Determines whether all the elements are boolean-equivalent to true, either directly or through computation by the provided iterator.

基本就是调用each方法，检查每个数据是否满足iterator条件，其中有一个不满足就抛出$break异常,然后在each方法里面会捕获这个异常。这里注意一下'!!'的用法，可以把某些对象转换成相应的bool值：

!!{}                true

!![]                 true

!!''                  false

!!'string'         true

!!0                  false

下面看一下示例：
代码如下:

[].all()
// -> true (empty arrays have no elements that could be false-equivalent)

$R(1, 5).all()
// -> true (all values in [1..5] are true-equivalent)

[0, 1, 2].all()
// -> false (with only one loop cycle: 0 is false-equivalent)

[9, 10, 15].all(function(n) { return n >= 10; })
// -> false (the iterator will return false on 9)

$H({ name: 'John', age: 29, oops: false }).all(function(pair) { return pair.value; })
// -> false (the oops/false pair yields a value of false)

12下一页阅读全文

ajax

写下你的评论吧 !

吐个槽吧,看都看了

会员登录 | 用户注册

推荐阅读

json
使用Python urllib模块实现POST请求并爬取百度翻译结果

本文详细解析了如何使用Python的urllib模块发起POST请求，并通过实例展示如何爬取百度翻译的翻译结果。 ... [详细]

蜡笔小新   2024-12-24 18:49:24

正则
JavaScript 实战与基础案例解析

本文介绍了多个关于JavaScript的书籍资源、实用工具和编程实例，涵盖从入门到进阶的各个阶段，帮助读者全面提升JavaScript编程能力。 ... [详细]

蜡笔小新   2024-12-24 16:36:52

npm
2019年前端技术趋势及职业发展路径

本文探讨了2019年前端技术的发展趋势，包括工具化、配置化和泛前端化等方面，并提供了详细的学习路线和职业规划建议。 ... [详细]

蜡笔小新   2024-12-19 10:19:35

json
深入理解Ajax请求中的async属性

在Web开发过程中，Ajax技术常用于前后端数据交互。其中一个重要的属性async决定了请求是否以异步方式执行，本文将详细解析async属性的作用及使用方法。 ... [详细]

蜡笔小新   2024-12-19 07:51:12

json
理解文档对象模型（DOM）

本文介绍了文档对象模型（DOM）的基本概念，包括其作为HTML文档的节点树结构，以及如何通过JavaScript操作DOM来实现网页的动态交互。 ... [详细]

蜡笔小新   2024-12-19 06:28:15

label
JavaScript前端开发中常用的四种继承方法详解

本文深入探讨了JavaScript中实现继承的四种常见方法，包括原型链继承、构造函数继承、组合继承和寄生组合继承。对于正在学习或从事Web前端开发的技术人员来说，理解这些继承模式对于提高代码质量和维护性至关重要。 ... [详细]

蜡笔小新   2024-12-18 11:08:28

json
ThinkPHP6多数据库部署指南

本文将详细介绍如何在ThinkPHP6框架中实现多数据库的部署，包括读写分离的策略，以及如何通过负载均衡和MySQL同步技术优化数据库性能。 ... [详细]

蜡笔小新   2024-12-17 18:59:28

firefox
使用WebBrowser控件实现点击输入框显示图片验证码的方法

本文探讨了如何通过WebBrowser控件在用户点击输入框时自动显示图片验证码。该过程可能涉及JavaScript事件的触发与响应。 ... [详细]

蜡笔小新   2024-12-17 18:28:07

build
Spring Boot 解决 AJAX 跨域请求及自定义 Headers 方法

本文探讨了浏览器的同源策略限制及其对 AJAX 请求的影响，并详细介绍了如何在 Spring Boot 应用中优雅地处理跨域请求，特别是当请求包含自定义 Headers 时的解决方案。 ... [详细]

蜡笔小新   2024-12-17 13:57:01

npm
深入解析ES6至ES8的新特性与应用

本文详细介绍了自2015年发布的ECMAScript 6.0（简称ES6）以来，JavaScript语言的多项重要更新，旨在帮助开发者更好地理解和利用这些新特性进行复杂应用的开发。 ... [详细]

蜡笔小新   2024-12-17 12:11:23

npm
Python爬虫实战：51CTO学院IT课程数据抓取

本文将介绍如何利用Python爬虫技术抓取国内主流在线学习平台的数据，并以51CTO学院为例，进行详细的技术解析和实践操作。 ... [详细]

蜡笔小新   2024-12-17 11:53:33

npm
深入分析十大PHP开发框架

随着PHP技术的发展，各类开发框架层出不穷，成为了开发者们热议的话题。本文将详细介绍并对比十款主流的PHP开发框架，旨在帮助开发者根据自身需求选择最合适的工具。 ... [详细]

蜡笔小新   2024-12-17 11:15:55

build
WPF/E CTP与SDK即将发布，引领RIA新时代？

Microsoft即将发布WPF/E的CTP（Community Technology Preview）和SDK，标志着RIA（Rich Internet Application）技术的新里程碑。更多详情及下载链接请参见MSDN官方页面。 ... [详细]

蜡笔小新   2024-12-16 16:06:18

js
理解ServletContext的作用与应用

ServletContext接口在Java Web开发中扮演着重要角色，它提供了一种方式来获取关于整个Web应用程序的信息。通过ServletContext，开发者可以访问初始化参数、共享数据以及应用资源。 ... [详细]

蜡笔小新   2024-12-15 19:48:20

build
网页游戏开发流程详解

本文深入探讨网页游戏的开发流程，涵盖从程序框架设计到具体实现的技术细节，旨在为开发者提供全面的指导。 ... [详细]

蜡笔小新   2024-12-15 19:38:30

周俪劳伦瑶的瑶

这个家伙很懒，什么也没留下！

Tags | 热门标签

scroll

react

iframe

js

hybrid

json

button

jq

overflow

html5

正则

checkbox

requirejs

label

svg

bootstrap

微信开发

firefox

firebug

listview

npm

build

dialog

yarn

layout

scheme

charts

chart

node.js

chrome

RankList | 热门文章

1解决JavaWeb项目中因IPv6导致的IP转换错误

2PHP实现SQL Server 2010数据库分页查询

3Qt应用开发：创建基本窗口

4圣诞夜的驯鹿之谜：鲁道夫是公是母？

5JavaScript编程基础与面向对象特性

6Java代理模式详解：静态代理、JDK动态代理与Cglib动态代理

7解决联想笔记本电脑摄像头黑屏问题的方法

8正则表达式浅解

9DevOps微课｜如何用Gerrit进行评审

10将数组的所有元素递增 1 的 Java 程序

11腾讯王卡亲情号数量上限及使用规则解析

125G时代的广域网革新：企业迈向万物智联的新起点

13解决Xcode PBXcp 错误：找不到文件或目录

14重写init方法后，属性声明后为什么不为nil？

15优化 Kotlin 中的 Android Retrofit 和 RxJava 使用