Prototype Enumerable對象學習第1/2頁

更新時間：2009年07月19日 01:18:33 作者：

Enumerable是Prototype框架的基石，而Enumerable不單獨使用，在Prototype中其它對象mix了Enumerable里面的方法，這樣就可以在這些對象上應(yīng)用Enumerable的方法，這樣的對象有：Array，Hash，ObjectRange，還有一些和DOM，AJAX相關(guān)的對象。

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里面的方法，這樣就可以在這些對象上應(yīng)用Enumerable的方法，這樣的對象有：Array，Hash，ObjectRange，還有一些和DOM，AJAX相關(guān)的對象。
個人理解Enumerable相當于C++中的抽象類的概念，其它類可以繼承自這個類，并且實現(xiàn)Enumerable里面的抽象方法"_each"，并且可以覆蓋其它的方法，而Enumerable本身卻不可以實例化，只可以實例化它的子類。
下面看一下如何通過Enumerable來寫自己的類：

復(fù)制代碼代碼如下:

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 
});

可以看出最重要的就是實現(xiàn)_each方法，initialize方法就相當于構(gòu)造函數(shù)，如果不需要外部傳進來什么參數(shù)，完全可以省略。下面我自己寫了一個產(chǎn)生隨機數(shù)數(shù)組的類，非常簡單，有許多不完善的地方，這里只做演示用：

復(fù)制代碼代碼如下:

//創(chuàng)建RandomArray類 
var RandomArray = Class.create(); 
//mixin Enumerable 
Object.extend(RandomArray.prototype, Enumerable); 
//實現(xiàn)_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]); 
        } 
    }, 
//產(chǎn)生隨機數(shù)數(shù)組 
    _createRandomArray:function(){ 
        var index=0; 
        while(index<this.count){ 
            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的源碼，然后具體學習其中的每個方法：

復(fù)制代碼代碼如下:

var $break = { }; 

var Enumerable = (function() { 
//遍歷每個數(shù)據(jù) 
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; 
} 

//把數(shù)據(jù)劃分成N組，其中每組有number個數(shù)，最后一組可能小于number個數(shù) 
function eachSlice(number, iterator, context) { 
var index = -number, slices = [], array = this.toArray(); 
if (number < 1) return array; 
while ((index += number) < array.length) 
slices.push(array.slice(index, index+number)); 
return slices.collect(iterator, context); 
} 

//測試是否所有數(shù)據(jù)都滿足某個條件 
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; 
} 

//檢查是否有任意一個數(shù)據(jù)滿足某個條件 
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; 
} 

//可以對所有數(shù)據(jù)進行任何操作，并返回結(jié)果數(shù)組 
function collect(iterator, context) { 
iterator = iterator || Prototype.K; 
var results = []; 
this.each(function(value, index) { 
results.push(iterator.call(context, value, index)); 
}); 
return results; 
} 

//查找第一個滿足某個條件的數(shù)據(jù)，并返回，相當于find方法的別名 
function detect(iterator, context) { 
var result; 
this.each(function(value, index) { 
if (iterator.call(context, value, index)) { 
result = value; 
throw $break; 
} 
}); 
return result; 
} 

//查找所有滿足某個條件的數(shù)據(jù)，并返回結(jié)果 
function findAll(iterator, context) { 
var results = []; 
this.each(function(value, index) { 
if (iterator.call(context, value, index)) 
results.push(value); 
}); 
return results; 
} 

//根據(jù)filter條件過濾所有數(shù)據(jù)，找到滿足filter條件的數(shù)據(jù)，并返回結(jié)果 
//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; 
} 

//檢查是否包含某個數(shù)據(jù) 
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方法類似，如果最后一組元素個數(shù)不足number，則用fillWith參數(shù)填充 
function inGroupsOf(number, fillWith) { 
fillWith = Object.isUndefined(fillWith) ? null : fillWith; 
return this.eachSlice(number, function(slice) { 
while(slice.length < number) slice.push(fillWith); 
return slice; 
}); 
} 

//對所有數(shù)據(jù)連續(xù)進行某個操作，可以實現(xiàn)累加或者累乘等操作 
function inject(memo, iterator, context) { 
this.each(function(value, index) { 
memo = iterator.call(context, memo, value, index); 
}); 
return memo; 
} 

//在所有數(shù)據(jù)上執(zhí)行某個方法 
function invoke(method) { 
var args = $A(arguments).slice(1); 
return this.map(function(value) { 
return value[method].apply(value, args); 
}); 
} 

//找數(shù)據(jù)中的最大值 
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; 
} 

//找數(shù)據(jù)中的最小值 
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) 
result = value; 
}); 
return result; 
} 

//把所有數(shù)據(jù)一分為二，第一組為滿足某個條件的數(shù)據(jù)，第二組為不滿足條件的數(shù)據(jù) 
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]; 
} 

//取出所有數(shù)據(jù)的property的值，并返回結(jié)果 
function pluck(property) { 
var results = []; 
this.each(function(value) { 
results.push(value[property]); 
}); 
return results; 
} 

//找到不滿足某個條件的數(shù)據(jù) 
function reject(iterator, context) { 
var results = []; 
this.each(function(value, index) { 
if (!iterator.call(context, value, index)) 
results.push(value); 
}); 
return results; 
} 

//根據(jù)某個條件對所有數(shù)據(jù)進行排序 
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 : a > b ? 1 : 0; 
}).pluck('value'); 
} 

//返回數(shù)據(jù)的數(shù)組表示形式 
function toArray() { 
return this.map(); 
} 

//基本就是把兩組數(shù)據(jù)放在一起進行某些操作 
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 '#<Enumerable:' + this.toArray().inspect() + '>'; 
} 

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.

基本就是調(diào)用each方法，檢查每個數(shù)據(jù)是否滿足iterator條件，其中有一個不滿足就拋出$break異常,然后在each方法里面會捕獲這個異常。這里注意一下'!!'的用法，可以把某些對象轉(zhuǎn)換成相應(yīng)的bool值：

!!{} true

!![] true

!!'' false

!!'string' true

!!0 false

下面看一下示例：

復(fù)制代碼代碼如下:

[].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 下一頁閱讀全文