Prototype Enumerable對象 學習第1/2頁_prototype

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<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的源碼，然後具體學習其中的每個方法：

複製代碼 代碼如下:

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) < array.length)
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為字串或者Regex
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 < number) slice.push(fillWith);
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)
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 : 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 '#<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.

基本就是調用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)

當前1/2頁 12下一頁閱讀全文