學(xué)習(xí)JavaScript設(shè)計(jì)模式之迭代器模式
- 迭代器模式是指提供一種方法順序訪問(wèn)一個(gè)聚合對(duì)象中的各個(gè)元素,而又不需要暴露該對(duì)象的內(nèi)部表示。
JavaScript中的Array.prototype.forEach
一、jQuery中的迭代器
$.each([1, 2, 3], function(i, n) {
console.log("當(dāng)前下標(biāo)為:"+ i + " 當(dāng)前元素為:"+ n );
});
二、實(shí)現(xià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("當(dāng)前下標(biāo)為:"+ i + " 當(dāng)前元素為:"+ n );
});
注意:區(qū)別于Array.prototype.forEach的參數(shù)?。。?/p>
[1, 2, 3].forEach(function(n, i, curAry){
console.log("當(dāng)前下標(biāo)為:"+ i + " 當(dāng)前元素為:"+ n + " 當(dāng)前數(shù)組為:" + curAry);
})
三、內(nèi)部迭代器、外部迭代器
(1)內(nèi)部迭代器:已經(jīng)定義好了迭代規(guī)則,它完全接手整個(gè)迭代過(guò)程,外部只需一次初始調(diào)用。上述自定義each即為內(nèi)部迭代器!
(2)外部迭代器:必須顯示地請(qǐng)求迭代下一個(gè)元素。
示例:判斷兩個(gè)數(shù)組是否相等
示例一:內(nèi)部迭代器
// 內(nèi)部迭代器
var each = function(ary, callback) {
for(var i = 0, l = ary.length; i < l; i++) {
callback.call(ary[i], i, ary[i]);
}
};
// 比較函數(shù)
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方法外,后續(xù)console.log("相等")會(huì)繼續(xù)執(zhí)行,所以這里得使用throw
throw new Error("不相等");
}
});
console.log("相等");
}
compareAry([1, 2, 3], [1, 2, 4]);
示例二:外部迭代器
// 外部迭代器
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
};
};
// 比較函數(shù)
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);
});
五、應(yīng)用(落地)
文件上傳,根據(jù)不同的瀏覽器獲取相應(yīng)的上傳組件對(duì)象。
對(duì)比《JavaScript設(shè)計(jì)模式–責(zé)任鏈模式》
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 = '<object type="application/x-shockwave-flash"></object>';
return $(str).appendTo($("body"));
}
return false;
}
function getFormUploadObj() {
var str = '<input name="file" type="file" class="ui-file" />';
return $(str).appendTo($("body"));
}
// 是否支持flash
function supportFlash() {
var hasFlash = 0; //是否安裝了flash
var flashVersion = 0; //flash版本
if (document.all) {
var swf = new ActiveXObject('ShockwaveFlash.ShockwaveFlash');
if (swf) {
hasFlash = 1;
VSwf = swf.GetVariable("$version");
flashVersion = parseInt(VSwf.split(" ")[1].split(",")[0]);
}
} else {
if (navigator.plugins && navigator.plugins.length > 0) {
var swf = navigator.plugins["Shockwave Flash"];
if (swf) {
hasFlash = 1;
var words = swf.description.split(" ");
for (var i = 0; i < words.length; ++i) {
if (isNaN(parseInt(words[i]))) continue;
flashVersion = parseInt(words[i]);
}
}
}
}
return { f: hasFlash, v: flashVersion };
}
希望本文所述對(duì)大家學(xué)習(xí)javascript程序設(shè)計(jì)有所幫助。
相關(guān)文章
JS正則表達(dá)式完美實(shí)現(xiàn)身份證校驗(yàn)功能
這篇文章主要介紹了JS正則表達(dá)式完美實(shí)現(xiàn)身份證校驗(yàn)功能,需要的朋友可以參考下2017-10-10
JavaScript中的call和apply的用途以及區(qū)別
本文主要介紹了JavaScript中的call和apply的用途以及區(qū)別。具有很好的參考價(jià)值,下面跟著小編一起來(lái)看下吧2017-01-01
JavaScript對(duì)象拷貝與Object.assign用法實(shí)例分析
這篇文章主要介紹了JavaScript對(duì)象拷貝與Object.assign用法,結(jié)合實(shí)例形式分析了javascript深拷貝與淺拷貝以及Object.assign的功能與相關(guān)使用技巧,需要的朋友可以參考下2018-06-06
javascript簡(jiǎn)單判斷輸入內(nèi)容是否合法的方法
這篇文章主要介紹了javascript簡(jiǎn)單判斷輸入內(nèi)容是否合法的方法,以驗(yàn)證用戶名是否為數(shù)字與字母組成為例,分析了javascript正則驗(yàn)證的思路與實(shí)現(xiàn)方法,需要的朋友可以參考下2016-05-05
JS 正則表達(dá)式驗(yàn)證密碼、郵箱格式的實(shí)例代碼
這篇文章主要介紹了JS 正則表達(dá)式驗(yàn)證密碼、郵箱格式的實(shí)例代碼,需要的朋友可以參考下2018-10-10
使用jsonp實(shí)現(xiàn)跨域獲取數(shù)據(jù)實(shí)例講解
這篇文章主要介紹了使用jsonp實(shí)現(xiàn)跨域獲取數(shù)據(jù)實(shí)例講解,需要的朋友可以參考下2016-12-12

