迭代器模式

要解决的问题

迭代器要解决的问题很简单很单纯，就是进行遍历操作。

实现原理

基本所有语言都实现了迭代器，javascript也不例外，如Array.prototype.forEach，for..of..，for..in..，for

迭代器的种类分两种，内部迭代器，外部迭代器。

内部迭代器

内部迭代器的迭代过程对外部是不可控的，内部自己实现迭代过程.比如forEach, jQuery中的$.each

外部迭代器

外部迭代器就相对灵活，可以控制迭代过程，需要显式调用迭代操作.外部迭代器较内部迭代器来说更方便扩展。

外部迭代器的一个实现

    // itObj 是被迭代对象，需要包含length属性

    var Iterator = function(itObj) {

        this.obj = itObj

        this.currentItem = 0

        this.length = itObj.length

    }

    Iterator.prototype.next = function() {

        if (this.currentItem < this.length) {

            this.currentItem++

        }

    }

    Iterator.prototype.getCurrentItem = function() {

        return this.obj[this.currentItem]

    }

    Iterator.prototype.isDone = function() {

        return this.currentItem >= this.length

    }

    var it = new Iterator([1, 2, 3])

    console.log(it.getCurrentItem()) // 1

    it.next()

    console.log(it.getCurrentItem()) // 2

    it.next()

    console.log(it.getCurrentItem()) // 3

    it.next()

    console.log(it.getCurrentItem()) // 3

扩展我们的迭代器，实现两个数组的merge函数

    //两个迭代器

    var it1 = new Iterator([1,3,4,6])

    var it2 = new Iterator([2,3,5,7])

    var merge = function(it1, it2) {

        var tmp = []

        // 两个迭代器同时遍历

        while(!it1.isDone() && !it2.isDone()) {

            if (it1.getCurrentItem() > it2.getCurrentItem()) {

                tmp.push(it2.getCurrentItem())

                it2.next()

            } else if (it1.getCurrentItem() < it2.getCurrentItem()) {

                tmp.push(it1.getCurrentItem())

                it1.next()

            } else {

                tmp.push(it1.getCurrentItem())

                it1.next()

                it2.next()

            }

        }

        // 如果it1没被遍历完，直接push

        while(!it1.isDone()) {

            tmp.push(it1.getCurrentItem())

            it1.next()

        }

        // 如果it2没被遍历完，直接push

        while(!it2.isDone()) {

            tmp.push(it2.getCurrentItem())

            it2.next()

        }

        return tmp

    }

    console.log(merge(it1, it2)) // [1, 2, 3, 4, 5, 6, 7]

可以看到用外部迭代器很容易地控制迭代过程，扩展功能

实践中的应用

一个copy自书上的例子

获取上传对象

未使用迭代器的版本

    var getUploadObj = function() {

		try {

			return new ActiveXObject("TXFTNActiveX.FTNUpload");

		} catch (e) {

			// IE 上传控件

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

			}

		}

	}

我们看到其中夹杂着try...catch语句和大量的if语句，严重违反了开闭原则。

使用迭代器重构

   var getActiveUploadObj = function() {

		try {

			return new ActiveXObject("TXFTNActiveX.FTNUpload");  //IE上传控件

		} 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 = '<input name="file" type="file" class="ui-file" />'

        return $(str).appendTo($('body'))

    }

    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)

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

巴特西

js设计模式总结-迭代器模式