javascript设计模式——迭代器模式

2018-06-24 01:01:52来源：未知阅读 ()

前面的话

　　迭代器模式是指提供一种方法顺序访问一个聚合对象中的各个元素，而又不需要暴露该对象的内部表示。迭代器模式可以把迭代的过程从业务逻辑中分离出来，在使用迭代器模式之后，即使不关心对象的内部构造，也可以按顺序访问其中的每个元素。迭代器模式是一种相对简单的模式，简单到很多时候都不认为它是一种设计模式。本文将详细介绍迭代器模式

迭代器实现

　　迭代器模式无非就是循环访问聚合对象中的各个元素。比如jQuery中的$.each函数，其中回调函数中的参数i为当前索引，n为当前元素，代码如下：

$.each( [1, 2, 3], function( i, n ){
    console.log( '当前下标为： '+ i );
    console.log( '当前值为:' + n );
});

　　现在来自己实现一个each函数，each函数接受2个参数，第一个为被循环的数组，第二个为循环中的每一步后将被触发的回调函数

var each = function( ary, callback ){
    for ( var i = 0, l = ary.length; i < l; i++ ){
        callback.call( ary[i], i, ary[ i ] ); // 把下标和元素当作参数传给callback 函数
    }
};

each( [ 1, 2, 3 ], function( i, n ){
    alert ( [ i, n ] );
});

迭代器分类

　　迭代器可以分为内部迭代器和外部迭代器，它们有各自的适用场景

【内部迭代器】

　　刚刚编写的each函数属于内部迭代器，each函数的内部已经定义好了迭代规则，它完全接手整个迭代过程，外部只需要一次初始调用

　　内部迭代器在调用的时候非常方便，外界不用关心迭代器内部的实现，跟迭代器的交互也仅仅是一次初始调用，但这也刚好是内部迭代器的缺点。由于内部迭代器的迭代规则已经被提前规定，上面的each函数就无法同时迭代2个数组了

　　比如现在有个需求，要判断2个数组里元素的值是否完全相等，如果不改写each函数本身的代码，能够入手的地方似乎只剩下each的回调函数了，代码如下：

var compare = function( ary1, ary2 ){
    if ( ary1.length !== ary2.length ){
        throw new Error ( 'ary1 和ary2 不相等' );
    }
    each( ary1, function( i, n ){
        if ( n !== ary2[ i ] ){
            throw new Error ( 'ary1 和ary2 不相等' );
        }
    });
    alert ( 'ary1 和ary2 相等' );
};
compare( [ 1, 2, 3 ], [ 1, 2, 4 ] ); // throw new Error ( 'ary1 和ary2 不相等' );

【外部迭代器】

　　外部迭代器必须显式地请求迭代下一个元素。外部迭代器增加了一些调用的复杂度，但相对也增强了迭代器的灵活性，可以手工控制迭代的过程或者顺序

var Iterator = function( obj ){
    var current = 0;
    var next = function(){
        current += 1;
    };
    var isDone = function(){
        return current >= obj.length;
    };
    var getCurrItem = function(){
        return obj[ current ];
    };
    return {
        next: next,
        isDone: isDone,
        getCurrItem: getCurrItem
    }
};

　　下面来改写compare函数：

var compare = function( iterator1, iterator2 ){
    while( !iterator1.isDone() && !iterator2.isDone() ){
        if ( iterator1.getCurrItem() !== iterator2.getCurrItem() ){
            throw new Error ( 'iterator1 和iterator2 不相等' );
        }
        iterator1.next();
        iterator2.next();
    }
    alert ( 'iterator1 和iterator2 相等' );
}
var iterator1 = Iterator( [ 1, 2, 3 ] );
var iterator2 = Iterator( [ 1, 2, 3 ] );
compare( iterator1, iterator2 ); // 输出：iterator1 和iterator2 相等

　　外部迭代器虽然调用方式相对复杂，但它的适用面更广，也能满足更多变的需求。内部迭代器和外部迭代器在实际生产中没有优劣之分，究竟使用哪个要根据需求场景而定

迭代类数组

　　迭代器模式不仅可以迭代数组，还可以迭代一些类数组的对象。比如arguments、{"0":'a',"1":'b'}等。无论是内部迭代器还是外部迭代器，只要被迭代的聚合对象拥有length属性而且可以用下标访问，那它就可以被迭代

　　在javascript中，for in语句可以用来迭代普通字面量对象的属性。jQuery中提供了$.each函数来封装各种迭代行为

$.each = function( obj, callback ) {
    var value,
    i = 0,
    length = obj.length,
    isArray = isArraylike( obj );
    if ( isArray ) { // 迭代类数组
        for ( ; i < length; i++ ) {
            value = callback.call( obj[ i ], i, obj[ i ] );
            if ( value === false ) {
                break;
            }
        }
    } else {
        for ( i in obj ) { // 迭代object 对象
            value = callback.call( obj[ i ], i, obj[ i ] );
            if ( value === false ) {
                break;
            }
        }
    }
    return obj;
};

倒序迭代器

　　迭代器模式提供了循环访问一个聚合对象中每个元素的方法，但它没有规定以顺序、倒序还是中序来循环遍历聚合对象

　　下面实现一个倒序访问的迭代器

var reverseEach = function( ary, callback ){
    for ( var l = ary.length - 1; l >= 0; l-- ){
        callback( l, ary[ l ] );
    }
};

reverseEach( [ 0, 1, 2 ], function( i, n ){
    console.log( n ); // 分别输出：2, 1 ,0
});

中止迭代器

　　迭代器可以像普通for循环中的break一样，提供一种跳出循环的方法。在jQuery的each函数里有这样一句：

if(value===false){
  break;
}

　　这句代码的意思是，约定如果回调函数的执行结果返回false，则提前终止循环。下面把之前的each函数改写一下：

var each = function( ary, callback ){
    for ( var i = 0, l = ary.length; i < l; i++ ){
        if ( callback( i, ary[ i ] ) === false ){ // callback 的执行结果返回false，提前终止迭代
            break;
        }
    }
};

each( [ 1, 2, 3, 4, 5 ], function( i, n ){
    if ( n > 3 ){ // n 大于3 的时候终止循环
        return false;
    }
    console.log( n ); // 分别输出：1, 2, 3
});

文件上传

　　下面是一段关于文件上传的代码，目的是根据不同的浏览器获取相应的上传组件对象：

var getUploadObj = function(){ 
  try{
    return new ActiveXObject("TXFTNActiveX.FTNUpload");    // IE 上传控件
  }catch(e){
    if ( supportFlash() ){    // supportFlash 函数未提供
      var str = '<object type="application/x-shockwave-flash"></object>'; return $( str ).appendTo( $('body') );
    }else{
      var str = '<input name="file" type="file"/>'; // 表单上传
      return $( str ).appendTo( $('body') );
    }
  }
};

　　在不同的浏览器环境下，选择的上传方式是不一样的。因为使用浏览器的上传控件进行上传速度快，可以暂停和续传，所以首先会优先使用控件上传。如果浏览器没有安装上传控件，则使用Flash上传，如果连Flash也没安装，那就只好使用浏览器原生的表单上传了

　　上面的代码为了得到一个upload对象，getUploadObj函数里面充斥了try，catch以及if条件分支。缺点显而易见，很难阅读，且严重违反开闭原则。在开发和调试过程中，需要来回切换不同的上传方式，如果增加了一些另外的上传方式，比如，HTML5上传，这时唯一的办法是继续往getUploadObj函数里增加条件分支

　　目前一共有3种可能的上传方式，但不知道目前正在使用的浏览器支持哪几种。把每种获取upload对象的方法都封装在各自的函数里，然后使用一个迭代器，迭代获取这些upload对象，直到获取到一个可用的为止

var getActiveUploadObj = function(){ 
  try{
   return new ActiveXObject( "TXFTNActiveX.FTNUpload" );    // IE 上传控件
  }catch(e){
   return false;
  }
};

var getFlashUploadObj = function(){
  if ( supportFlash() ){    // supportFlash 函数未提供
    var str = '<object type="application/x-shockwave-flash"></object>'; 
    return $( str ).appendTo( $('body') );
  }
  return false;
};

var getFormUpladObj = function(){
  var str = '<input name="file" type="file" class="ui-file"/>'; // 表单上传
  return $( str ).appendTo( $('body') );
};

　　在getActiveUploadObj、getFlashUploadObj、getFormUpladObj这3个函数中都有同一个约定：如果该函数里面的upload对象是可用的，则让函数返回该对象，反之返回false，提示迭代器继续往后面进行迭代

　　所以我们的迭代器只需进行下面这两步工作：1、提供一个可以被迭代的方法，使得getActiveUploadObj，getFlashUploadObj以及getFlashUploadObj依照优先级被循环迭代；2、如果正在被迭代的函数返回一个对象，则表示找到了正确的upload对象，反之如果该函数返回false，则让迭代器继续工作

　　迭代器代码如下：

var iteratorUploadObj = function(){
  for ( var i = 0, fn; fn = arguments[ i++ ]; ){
    var uploadObj = fn();
    if ( uploadObj !== false ){ 
      return uploadObj;
    }
  }
};
var uploadObj = iteratorUploadObj( getActiveUploadObj, getFlashUploadObj, getFormUpladObj );

　　重构代码之后，获取不同上传对象的方法被隔离在各自的函数里互不干扰，try、catch和if分支不再纠缠在一起，使得可以很方便地的维护和扩展代码。比如，给上传项目增加了Webkit控件上传和HTML5上传，要做的仅仅是下面一些工作

var getWebkitUploadObj=function(){
  //具体代码略
};

var getHtml5UploadObj=function(){
  //具体代码略
};

　　依照优先级把它们添加进迭代器：

var uploadObj=iteratorUploadObj(getActiveUploadObj,getWebkitUploadObj,getFlashUploadObj,getHtml5UploadObj,getFormUpladObj);

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有

上一篇：vue项目中的webpack-dev-sever配置

下一篇：ES6 Iterator

IDC资讯：主机资讯注册资讯托管资讯 vps资讯网站建设

网站运营：建站经验策划盈利搜索优化网站推广免费资源

网站联盟：联盟新闻联盟介绍联盟点评网赚技巧

行业资讯：搜索引擎网络游戏电子商务广告传媒

网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它

服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器安全防护

软件技巧：其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷

网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash

程序设计： Java技术 C/C++ VB delphi

网络知识：网络协议网络安全网络管理组网方案 Cisco技术

操作系统： Win2000 WinXP Win2003 Mac OS Linux FreeBSD

热门词条

最新资讯

热门关注

热门标签