学习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程序设计有所帮助。