JavaScript設計モード--反復モード
12193 ワード
反復モードとは、オブジェクトの内部表現を露出することなく、集約オブジェクト内の各要素に順次アクセスする方法を提供することです.JavaScriptのArray.prototype.forEach
一、jQueryの反復器
二、自分の反復器を実現する
注意:Arrayとは違います.prototype.forEachのパラメータ!!!
三、内部反復器、外部反復器
(1)内部反復器:反復規則が定義されており、反復プロセス全体を完全に引き継ぎ、外部では初期呼び出しが1回しか必要ありません.上記のカスタムeachは内部反復器です!(2)外部反復器:次の要素の反復を表示する必要があります.例:2つの配列が等しいかどうかを判断する
例1:内部反復器
例2:外部反復器
四、終端反復器
五、応用(着地)
ファイルをアップロードし、異なるブラウザに基づいて対応するアップロードコンポーネントオブジェクトを取得します.『JavaScript設計モード–責任チェーンモード』と比較
一、jQueryの反復器
$.each([1, 2, 3], function(i, n) {
console.log(" :"+ i + " :"+ n );
});
二、自分の反復器を実現する
var each = function(ary, callback) {
for(var i = 0, l = ary.length; i < l; i++) {
callback.call(ary[i], i, ary[i]);
}
};
each([1, 2, 3], function(i, n) {
console.log(" :"+ i + " :"+ n );
});
注意:Arrayとは違います.prototype.forEachのパラメータ!!!
[1, 2, 3].forEach(function(n, i, curAry){
console.log(" :"+ i + " :"+ n + " :" + curAry);
})
三、内部反復器、外部反復器
(1)内部反復器:反復規則が定義されており、反復プロセス全体を完全に引き継ぎ、外部では初期呼び出しが1回しか必要ありません.上記のカスタムeachは内部反復器です!(2)外部反復器:次の要素の反復を表示する必要があります.例:2つの配列が等しいかどうかを判断する
例1:内部反復器
//
var each = function(ary, callback) {
for(var i = 0, l = ary.length; i < l; i++) {
callback.call(ary[i], i, ary[i]);
}
};
//
var compareAry = function(ary1, ary2) {
if(ary1.length != ary2.length) {
throw new Error(" "); // return console.log(" ");
}
//
each(ary1, function(i, n) {
if(n !== ary2[i]) {
// return console.log(" ");
// return each , console.log(" ") , throw
throw new Error(" ");
}
});
console.log(" ");
}
compareAry([1, 2, 3], [1, 2, 4]);
例2:外部反復器
//
var Iterator = function(obj) {
var current = 0,
next = function() {
current++;
},
isDone = function() {
return current >= obj.length;
},
getCurrentItem = function() {
return obj[current];
};
return {
next: next,
isDone: isDone,
getCurrentItem: getCurrentItem
};
};
//
var compareAry = function(iterator1, iterator2) {
while( !iterator1.isDone() && !iterator2.isDone() ){
if(iterator1.getCurrentItem() !== iterator2.getCurrentItem()) {
throw new Error(" ");
}
iterator1.next();
iterator2.next();
}
console.log(" ");
}
compareAry(new Iterator([1, 2, 3]), new Iterator([1, 2, 4]));
四、終端反復器
var each = function(ary, callback) {
for(var i = 0, l = ary.length; i < l; i++) {
if(callback.call(ary[i], i, ary[i]) === false) {
break;
}
}
}
each([1, 2, 4, 1], function(i, n) {
if(n > 3) {
return false;
}
console.log(n);
});
五、応用(着地)
ファイルをアップロードし、異なるブラウザに基づいて対応するアップロードコンポーネントオブジェクトを取得します.『JavaScript設計モード–責任チェーンモード』と比較
var iteratorUploadObj = function() {
for(var i = 0, fn; fn = arguments[i]; i++) {
var uploadObj = fn();
if(uploadObj !== false) {
return uploadObj;
}
}
};
var uploadObj = iteratorUploadObj(getActiveUploadObj, getFlashUploadObj, getFormUploadObj);
function getActiveUploadObj() {
try{
return new ActiveObject("TXFTNActiveX.FTNUpload"); // IE
}catch(e) {
return false;
}
}
function getFlashUploadObj() {
if(supportFlash().f === 1) {
var str = '