JavaScript设计模式之迭代器模式

定义

迭代器模式就是提供一种方法顺序访问一个聚合对象中的各个元素，而又不须要暴露该对象的内部表示。在JavaScript中，例如forEach的实现就是一种迭代器模式，它能够遍历数组。jQuery中的each方法既能够遍历数组也能够遍历对象，它也是迭代器模式的一种实现。

内部迭代器和外部迭代器

内部迭代器

内部迭代器的内部已经定义好了迭代规则，它彻底接手整个迭代过程，外部只须要一次初始调用。下面实现一个简单的内部迭代器：

const each = function (array, callback) {
  for (let i = 0, len = array.length; i < len; i++) {
    callback(array[i], i, array[i])
  }
}

each([1, 2, 3], function (i, n) {
  console.log(i, n)
})
复制代码

在JavaScript中，forEach和map函数都是内部迭代器的实现。

外部迭代器

外部迭代器必须显示地请求迭代下一个元素。外部迭代器虽然增长了相对的复杂度，可是也加强了迭代器的灵活性，咱们能够本身控制迭代器的过程或顺序。在ES6中，Generate函数也是外部迭代器的一种实现。下面简单实现一种外部迭代器：

const iterator = function (obj) {
  let current = 0

  const next = function () {
    current += 1
  }

  const isDone = function () {
    return current >= obj.length
  }

  const getCurrentItem = function () {
    return obj[current]
  }

  return {
    next,
    isDone,
    getCurrentItem,
    length: obj.length
  }
}
复制代码

迭代数组和对象字面量

迭代器模式不只能够迭代数组，还能够迭代一些类数组的对象，例如函数中的arguments和经过DOM API查询的NodeList。例如jQuery中的each方法就能够根据对象的类型使用不一样的迭代策略：

$.each = function (obj, callback) {
  let value,
    i = 0,
    length = obj.length,
    isArray = isArraylike(obj)

  if (isArray) {
    for (let i = 0, len = obj.length; i < len; i++) {
      value = callback(obj[i], i, obj[i])
      if (value === false) {
        break
      }
    }
  } else {
    for (i in obj) {
      value = callback(obj[i], i, obj[i])
      if (value === false) {
        break
      }
    }
  }
  return obj
}
复制代码

迭代器的应用

假设咱们须要实现一个需求，根据不一样的浏览器获取相应的上传组件对象，咱们能够经过以下代码来实现：

const getUploadObj = function () {
  try {
    return new ActiveXObject('TXFINActiveX.FTMUpload')
  } catch (e) {
    if (supportFlash()) {
      const obj = '<object type="application/x-shockwave-flash"></object>'
      return $(obj).appendTo($('body'))
    } else {
      const input = '<input name="file" type="file"/>'
      return $(input).appendTo($('body'))
    }
  }
}
复制代码

上面的代码，会根据不一样的浏览器环境选择不一样的上传方式。优先使用控件上传，控件不支持，则选择Flash上传方式，若是Flash也没安装，那就只好使用浏览器原生的表单上传。

虽然上面的代码也能实现需求，可是代码里混杂着try catch块和if else语句，首先阅读困难，其次违反了开闭原则。若是咱们想增长一种上传方式，好比HTML5上传，这时候惟一的办法就是继续往函数里增长条件分支。

梳理下问题，咱们能够看到，无论有多少种上传方式，咱们都要不断去尝试每一种方式，直到找到合适的方式。因而咱们能够把每种upload对象的方法封装在各自的函数里，经过迭代器获取这些upload对象，直到获取到一个可用的为止。下面经过代码来实现：

const getActiveUpload = function () {
  try {
    return new ActiveXObject('TXFINActiveX.FTMUpload')
  } catch (e) {
    return false
  }
}

const getFlashUpload = function () {
  if (supportFlash()) {
    const obj = '<object type="application/x-shockwave-flash"></object>'
    return $(obj).appendTo($('body'))
  }
  return false
}

const getFormUpload = function () {
  const input = '<input name="file" type="file"/>'
  return $(input).appendTo($('body'))
}
复制代码

上面封装的三种upload对象，若是被浏览器支持，则返回对应的upload对象，不然返回false，提示迭代器继续进行。下面来实现upload iterator：

const iteratorUpload = function () {
  for (let i = 0, len = arguments.length; i < len; i++) {
    const uploadObj = arguments[i]()
    if (uploadObj !== false) {
      return uploadObj
    }
  }
}

const uploadObj = iteratorUpload(getActiveUpload, getFlashUpload, getFormUpload)
复制代码

使用迭代器重构以后，咱们能够看到不一样上传对象的方法被隔离在不一样的函数中，互不干扰，使代码更容易维护，提升了代码的扩展性。若是咱们后续还要增长其余的上传方式，只须要定义新的函数，而后再按优先级把不一样的上传函数传递给iteratorUpload迭代器。