阅读 104

设计模式之--迭代器模式

1.定义

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

2.jQuery中的迭代器

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

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

3.实现一个迭代器

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

var each = function(ary, callback) {
    for(var i=0, l = arr.length; i< l; i++){
        callback.call(ary[i], i, ary[i])
    }
}

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

4.内部迭代器和外部迭代器

迭代器可以分为内部迭代器和外部迭代器

4.1 内部迭代器

上面编写的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]);
复制代码

这个compare函数实现并不优雅

4.2 外部迭代器

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

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

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,
        length: obj.length
    }
}

var compare = function(iterator1, iterator2){
    if (iterator1.length !== iterator2.length){
        throw new Error('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)
复制代码

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

5.迭代类数组对象和字面量对象

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

在JavaScript中,for in语句可以用来迭代普通字面量对象的属性。

6. 倒序迭代器

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

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

reverseEach([0,1,2], function(i,n){
    console.log(n);
})
复制代码

7.中止迭代器

迭代器可以像普通for循环中的break一样,提供一种跳出循环的方法。

var each = function(ary, callback) {
    for(var i=0, l = arr.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
    }
    console.log(n)
})
复制代码

8.迭代器模式的应用举例

优先级使用情况: 比如优先级 a > b > c

不使用迭代器模式:

var fun = function() {
    if (a) {
        return '具体代码'
    } else if (b) {
        return '具体代码'
    } else {
        return '具体代码'
    }
}
复制代码

这种写法的缺点:函数里充斥了if条件分支,很难阅读,严重违反开闭原则。如果后续想再增加方式,只能再往fun函数里增加条件分支

使用迭代器模式:把每种方法都封装在各自的函数里,然后使用一个迭代器,迭代获取这些对象,直到获取到一个可用的为止

var a = function(){
    if(a) {
        return '具体代码'
    }
    return false
}

var b = function(){
    if(b) {
        return '具体代码'
    }
    return false
}

var c = function(){
    if(c) {
        return '具体代码'
    }
    return false
}
复制代码

这三个函数中都有同一个约定:如果该函数里面的对象是可用的,则让函数返回该对象,反之返回false,提示迭代器继续往后面进行迭代

迭代器只需要进行下面这几步工作

  • 提供一个可以被迭代的方法,使得a,b,c依照优先级被循环迭代
  • 如果正在被迭代的函数返回一个对象,则表示找到了正确的对象,反之如果该函数返回false,则让迭代器继续工作
var iteratorObj = function(){
    for(var i=0, fn; fn=arguments[i++];) {
        var obj = fn();
        if (obj !== false){
            return obj;
        }
    }
}

var obj = iteratorObj(a,b,c)
复制代码

重构代码之后,获取不同对象的方法被隔离在各自的函数里互不干扰,if分支不再纠缠在一起,使得我们可以很方便地维护和扩展代码。

9.小结

迭代器模式是一种相对简单的模式,大部分语言都内置了迭代器

文章分类
前端