A5下载 - 努力做内容最丰富最安全的下载站!

A5站长下载站

当前位置:A5下载 > 编程开发 > 网站开发 > 学习JavaScript设计模式之迭代器模式

学习JavaScript设计模式之迭代器模式

时间:2016-01-20 11:42作者:fang人气:26

迭代器模式是指提供一种方法顺序访问一个聚合对象中的各个元素,而又不需要暴露该对象的内部表示。

JavaScript中的Array.prototype.forEach

一、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)内部迭代器:已经定义好了迭代规则,它完全接手整个迭代过程,外部只需一次初始调用。上述自定义each即为内部迭代器!

(2)外部迭代器:必须显示地请求迭代下一个元素。

示例:判断两个数组是否相等

示例一:内部迭代器

// 内部迭代器

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

示例二:外部迭代器

// 外部迭代器

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 = '<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 };

}

希望本文所述对大家学习javascript程序设计有所帮助。

标签学习,JavaScript,设计模式,迭代,模式,迭代,模式

相关下载

查看所有评论+

网友评论

网友
您的评论需要经过审核才能显示

公众号