热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

PrototypeEnumerable对象学习第1/2页

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的POST请求实现数据修改功能的方法。通过ajax-post技术,可以实现在输入某个id后,通过ajax技术调用post.jsp修改具有该id记录的姓名的值。文章还提到了AJAX的概念和作用,以及使用async参数和open()方法的注意事项。同时强调了不推荐使用async=false的情况,并解释了JavaScript等待服务器响应的机制。 ... [详细]
  • Java实战之电影在线观看系统的实现
    本文介绍了Java实战之电影在线观看系统的实现过程。首先对项目进行了简述,然后展示了系统的效果图。接着介绍了系统的核心代码,包括后台用户管理控制器、电影管理控制器和前台电影控制器。最后对项目的环境配置和使用的技术进行了说明,包括JSP、Spring、SpringMVC、MyBatis、html、css、JavaScript、JQuery、Ajax、layui和maven等。 ... [详细]
  • 本文介绍了一种处理AJAX操作授权过期的全局方式,以解决Asp.net MVC中Session过期异常的问题。同时还介绍了基于WebImage的图片上传工具类。详细内容请参考链接:https://www.cnblogs.com/starluck/p/8284949.html ... [详细]
  • 本文介绍了如何使用jQuery和AJAX来实现动态更新两个div的方法。通过调用PHP文件并返回JSON字符串,可以将不同的文本分别插入到两个div中,从而实现页面的动态更新。 ... [详细]
  • 从零基础到精通的前台学习路线
    随着互联网的发展,前台开发工程师成为市场上非常抢手的人才。本文介绍了从零基础到精通前台开发的学习路线,包括学习HTML、CSS、JavaScript等基础知识和常用工具的使用。通过循序渐进的学习,可以掌握前台开发的基本技能,并有能力找到一份月薪8000以上的工作。 ... [详细]
  • 本文介绍了Java后台Jsonp处理方法及其应用场景。首先解释了Jsonp是一个非官方的协议,它允许在服务器端通过Script tags返回至客户端,并通过javascript callback的形式实现跨域访问。然后介绍了JSON系统开发方法,它是一种面向数据结构的分析和设计方法,以活动为中心,将一连串的活动顺序组合成一个完整的工作进程。接着给出了一个客户端示例代码,使用了jQuery的ajax方法请求一个Jsonp数据。 ... [详细]
  • 本文介绍了使用FormData对象上传文件同时附带其他参数的方法。通过创建一个表单,将文件和参数添加到FormData对象中,然后使用ajax发送POST请求进行文件上传。在发送请求时,需要设置processData为false,告诉jquery不要处理发送的数据;同时设置contentType为false,告诉jquery不要设置content-Type请求头。 ... [详细]
  • 本文介绍了DataTables插件的官方网站以及其基本特点和使用方法,包括分页处理、数据过滤、数据排序、数据类型检测、列宽度自动适应、CSS定制样式、隐藏列等功能。同时还介绍了其易用性、可扩展性和灵活性,以及国际化和动态创建表格的功能。此外,还提供了参数初始化和延迟加载的示例代码。 ... [详细]
  • Vue基础一、什么是Vue1.1概念Vue(读音vjuː,类似于view)是一套用于构建用户界面的渐进式JavaScript框架,与其它大型框架不 ... [详细]
  • 查询单个functionquery(id){$.ajax({url:smallproductServlet,async:true,type:POST,data:{typ ... [详细]
  • 工作经验谈之-让百度地图API调用数据库内容 及详解
    这段时间,所在项目中要用到的一个模块,就是让数据库中的内容在百度地图上展现出来,如经纬度。主要实现以下几点功能:1.读取数据库中的经纬度值在百度上标注出来。2.点击标注弹出对应信息。3 ... [详细]
  • Allegro总结:1.防焊层(SolderMask):又称绿油层,PCB非布线层,用于制成丝网印板,将不需要焊接的地方涂上防焊剂.在防焊层上预留的焊盘大小要比实际的焊盘大一些,其差值一般 ... [详细]
  • 前言:关于跨域CORS1.没有跨域时,ajax默认是带cookie的2.跨域时,两种解决方案:1)服务器端在filter中配置详情:http:blog.csdn.netwzl002 ... [详细]
  • ASP.NET&Spring.NET&NHibernate最佳实践(五)——第3章人事子系统(2)
    3.4.人事子系统服务层(Service)部门服务接口(IDeptService.cs)usingSystem;usingGuushuuse.SalaryPrj. ... [详细]
  • Python入门后,想要从事自由职业可以做哪方面工作?1.爬虫很多人入门Python的必修课之一就是web开发和爬虫。但是这两项想要赚钱的话 ... [详细]
author-avatar
周俪劳伦瑶的瑶
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有