眼前的话语

  迭代器模式是赖供相同种艺术顺序访问一个汇对象中之相继要素,而同时非需要暴露该目标的中表示。迭代器模式可以管迭代的历程从事情逻辑中分离出去,在利用迭代器模式后,即使不关注对象的内部组织,也可依照顺序访问中的每个元素。迭代器模式是一律种对立简单的模式,简单到博时分都非以为她是平等种设计模式。本文将详细介绍迭代器模式

 

迭代器实现

  迭代器模式无非就是是循环访问聚合对象吃之相继要素。比如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);

 

相关文章

网站地图xml地图