第4章 迭代器模式

jQuery中的迭代器

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

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

实现自己的迭代器

var each = function (arr, fn) {
    for (var i = 0, len = arr.length; i < len; i++) {
        fn.apply(arr, [i, arr[i]]);
    }
}
each([1,2,3], function (i, e) {
    console.log(this)
    console.warn({e, i})
})

内部迭代器与外部迭代器

• 内部迭代器
  即如上一样，它完全接手整个迭代过程，外部只需要一次初始调用。
• 外部迭代器
  外部迭代器必须显式地请求迭代下一个元素。
  外部迭代器增加了一些调用的复杂度，但相对也增强了迭代器的灵活性，我们可以手工控制迭代的过程或者顺序。

var Iterator = function (obj) {
    var current = 0;
    var next = function () {
        current = current + 1;
    };
    var isDone = function () {
        return current >= obj.length;
    };
    var getCurrentItem = function () {
        return obj[current]
    };
    return {
        next,
        isDone,
        getCurrentItem,
        length: obj.length,
    };
};
var compare = function (iteratorA, iteratorB) {
    if (iteratorA.length !== iteratorB.length) {
        return false;
    }
    while (!iteratorA.isDone() && !iteratorB.isDone()) {
        if (iteratorA.getCurrentItem() !== iteratorB.getCurrentItem()) {
            return false;
        };
        iteratorA.next();
        iteratorB.next();
    }
    return true;
}
var arr  = ['a', 'b', 'c', 'd'];
var arr2 = ['a', 'b', 'c', 'd'];
console.warn(compare(Iterator(arr), Iterator(arr2))); // true

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

迭代器模式的应用举例

• 未使用迭代器前的业务代码

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

• 使用迭代器模式进行优化

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'));
};
var iteratorUploadObj = function (arr) {
    for (var i = 0, len = arr.length; i < len; i++) {
        var uploadObj = arr[i]();
        if (uploadObj) {
            return uploadObj;
        }
    }
}
// 使用
var uploadObj = iteratorUploadObj(getActiveUploadObj, getFlashUploadObj, getFormUpladObj);

迭代器模式是一种相对简单的模式，简单到很多时候我们都不认为它是一种设计模式。目前的绝大部分语言都内置了迭代器。