【学习笔记javascript设计模式与开发实践（迭代器模式）----7】

第7章 迭代器模式

迭代器模式是指提供一种方法顺序访问一个聚合对象中的各个元素，而又不需要暴露该对象的内部表示。迭代器模式可以把迭代的过程从业务逻辑分离出来，在使用迭代器模式之后，即使不关心对象的内部构造，也可以按顺序访问其中的每个元素。

7.1 jQuery中的迭代器

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

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

7.2 实现自己的迭代器

现在我们可以自己来实现一个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]);
   }
}
each([1,2,3,4],function(i,n){
   alert([i,n]);
})

7.3 内部迭代器和外部迭代器

迭代器可以分为内部迭代和外部迭代器，它们有各自的适用场景。这一节我们将分别讨论这两种迭代器。

1.       内部迭代器

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

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

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

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

说实话，这个compare函数一点都算不上好看，我们目前能够顺利完成需求，还要感谢javascript里可以把函数当作参数传递的特性。但在其他语言中未必就能如此幸运。在一些没有闭包的语言中，内部迭代器本身的实现也相当复杂，如C语言中的内部迭代器是用函数指针来实现的，循环处理所需要的数据都要以参数的形式明确地从外面传递进去。

2.       外部迭代器

外部迭代器必须显式地请求迭代下一个元素。

外部迭代器增加了一些调用的复杂度，但相对也增强了迭代器的灵活性，我们可以手工控制迭代的过程或者顺序。

下面这个外部迭代器的实现来自《松本行弘的程序世界》用Ruby写成，这里我们翻译成js：

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

再看看如何改写compare函数：

var compare =function(iterator1,iterator2){
   while(!iterator1.isDone() &&!iterator2.isDone()){
       if(iterator1.getCurrentItem() !==iterator2.getCurrentItem()){
               throw new Error(“iterator1和iterator2不相等’);
       }
       iterator1.next();
       iterator2.next();
   }
}
 
var iterator1 =Iterator([1,2,3]);
var iterator2 =Iterator([1,2,3]);
compare(iterator1,iterator2);//输出<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);"> </span>

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

7.4 迭代类数组对象和字面量对象

迭代器模式不仅可以迭代数组，还可以迭代一些类数组对象。比如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){
         value = callback.call(obj[i],i,obj[i]);
         if(value===false){
               break;
         }
     }  //end for
  }//end else
  return obj;
}

7.5 倒序迭代器

由于GoF中对迭代器的模式的定义非常松散，所以我们可以有多种多样的迭代器实现。总的来说，迭代器模式提供了循环访问一个聚合对象中每个元素的方法，但它没有规定我们以顺序、倒序还是中序来循环遍历聚合对象

倒序遍历对象：

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

7.6 中止迭代器

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

if(value == false){
   break;
}

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

var each = function(ary,callback){
  for(vari=0,l=ary.length;i<l;i++){
    if(callback(i,ary[i])===false){
      break;
    }
  }
}
 
each([1,2,3,4,5],function(i,n){
  if(n>3){
      return false; //n大于 3终止循环
  }
   console.log(n);
});

7.7 迭代器模式的应用举例

作者曾经要重构一个模块的代码，发现下面的这段代码，它的目的是根据不同的浏览器获取相应的上传组件对象：

var getUploadObj = function(){
  try{
     return new ActiveXObject(‘TXFINActiveX.FTNUpload”); //ie上传
  }catch(e){
     if(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’));
     }
   }
}

现在来梳理一下问题，目前一共有3种可能上传的方式，我们不知道目前正在使用的浏览器支持哪几种。就好比我们有一个钥匙串，其中共有3把钥匙，我们想打开一扇门但是不知道用哪把钥匙，于是从第一把开始，迭代钥匙串进行尝试，直到找到正确的钥匙为止。

同样，我们把每种获取upload对象的方法都封装在各自的函数里，然后使用一个迭代器迭代获取这些upload对象，直到获取到一个可用的为止：

var getActiveUploadObj = function(){
   try{
       return new ActiveXObject(“TXFNActiveX.FTNUpload”);
    }catch(e){
       return false;
    }
}
 
var getFlashUploadObj = function(){
  if(supportFlash()){
     var str = ‘<object type=”application/x-shockwave-flash”></object>’;
     return $(str).appendTo($(‘body’));
   }
  return false;
}
 
var getFormUploadObj = function(){
var str = ‘<inputname = “file” type=”file” />’;
return$(str).appendTo($(‘body’));
}

在上述的3个函数中我们都有同一个约定，如果该函数里面的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, getFormUploadObj);

如后期还要支持html5的或是webkit的只要添加相应的函数就OK