《JavaScript设计模式与开发实践》——学习笔记（迭代器模式）

核心概念

迭代器模式是指提供一种方法顺序访问一个聚合对象中的各个元素，而又不需要暴露该对象 的内部表示。

其中迭代器又分为内部迭代器与外部迭代器。

内部迭代器在内部定义好了迭代的规则，外界不用关心迭代器内部的实现，跟迭代器的交互也仅仅是一次初始调用。

js本身就有许多内部迭代器的实现，如each方法、map方法等等，下面是一个例子：

['a', 'b', 'c', 'd'].forEach((char, index) => {
  console.log(`the ${index + 1} letter is ${char}`)
})
// the 1 letter is a
// the 2 letter is b
// the 3 letter is c
// the 4 letter is d

而外部迭代器则是由用户决定何时进入下一个元素的迭代如：

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,
  }
}
var compare = function (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) // 输出：iterator1 和 iterator2 相等

外部迭代器的运用场景非常之多，除了可以用来迭代上面的同步队列以外，外部迭代器还可以用于迭代异步的队列，从而使得异步队列能够按顺序进行。就像是vue-router里的导航守卫的执行，就是运用的外部迭代器，vue-router将各类导航守卫和加载异步组件的函数塞到了一个队列中，并通过构建外部迭代器，使得各异步任务得以顺序地执行。