学习JavaScript设计模式之迭代器模式
- 迭代器模式是指提供一种方法顺序访问一个聚合对象中的各个元素，而又不需要暴露该对象的内部表示。
JavaScript中的Array.prototype.forEach
一、jQuery中的迭代器
$.each([1,2,3],function(i,n){
console.log("当前下标为："+i+"当前元素为："+n);
});
二、实现自己的迭代器
vareach=function(ary,callback){
for(vari=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）外部迭代器：必须显示地请求迭代下一个元素。
示例：判断两个数组是否相等
示例一：内部迭代器
//内部迭代器
vareach=function(ary,callback){
for(vari=0,l=ary.length;i<l;i++){
callback.call(ary[i],i,ary[i]);
}
};
//比较函数
varcompareAry=function(ary1,ary2){
if(ary1.length!=ary2.length){
thrownewError("不相等");//returnconsole.log("不相等");
}
//且住
each(ary1,function(i,n){
if(n!==ary2[i]){
//returnconsole.log("不相等");
//return只能返回到each方法外，后续console.log("相等")会继续执行，所以这里得使用throw
thrownewError("不相等");
}
});
console.log("相等");
}
compareAry([1,2,3],[1,2,4]);
示例二：外部迭代器
//外部迭代器
varIterator=function(obj){
varcurrent=0,
next=function(){
current++;
},
isDone=function(){
returncurrent>=obj.length;
},
getCurrentItem=function(){
returnobj[current];
};
return{
next:next,
isDone:isDone,
getCurrentItem:getCurrentItem
};
};
//比较函数
varcompareAry=function(iterator1,iterator2){
while(!iterator1.isDone()&&!iterator2.isDone()){
if(iterator1.getCurrentItem()!==iterator2.getCurrentItem()){
thrownewError("不相等");
}
iterator1.next();
iterator2.next();
}
console.log("相等");
}
compareAry(newIterator([1,2,3]),newIterator([1,2,4]));
四、终止迭代器
vareach=function(ary,callback){
for(vari=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){
returnfalse;
}
console.log(n);
});
五、应用（落地）
文件上传，根据不同的浏览器获取相应的上传组件对象。
对比《JavaScript设计模式–责任链模式》
variteratorUploadObj=function(){
for(vari=0,fn;fn=arguments[i];i++){
varuploadObj=fn();
if(uploadObj!==false){
returnuploadObj;
}
}
};
varuploadObj=iteratorUploadObj(getActiveUploadObj,getFlashUploadObj,getFormUploadObj);
functiongetActiveUploadObj(){
try{
returnnewActiveObject("TXFTNActiveX.FTNUpload");//IE上传控件
}catch(e){
returnfalse;
}
}
functiongetFlashUploadObj(){
if(supportFlash().f===1){
varstr='<objecttype="application/x-shockwave-flash"></object>';
return$(str).appendTo($("body"));
}
returnfalse;
}
functiongetFormUploadObj(){
varstr='<inputname="file"type="file"class="ui-file"/>';
return$(str).appendTo($("body"));
}
//是否支持flash
functionsupportFlash(){
varhasFlash=0;//是否安装了flash
varflashVersion=0;//flash版本
if(document.all){
varswf=newActiveXObject('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){
varswf=navigator.plugins["ShockwaveFlash"];
if(swf){
hasFlash=1;
varwords=swf.description.split("");
for(vari=0;i<words.length;++i){
if(isNaN(parseInt(words[i])))continue;
flashVersion=parseInt(words[i]);
}
}
}
}
return{f:hasFlash,v:flashVersion};
}
希望本文所述对大家学习javascript程序设计有所帮助。