Javascript 设计模式系统讲解与应用——学习笔记9-迭代器模式

迭代器模式

• 顺序访问一个集合
• 使用者无需知道集合的内部结构（封装）

JS简化版UML类图

class Iterator {
  constructor(container) {
    this.list = container.list
    this.index = 0
  }
  next() {
    if (this.hasNext()) {
      return this.list[this.index++]
    }
    return null
  }
  hasNext（） {
    if (this.index >= this.list.length) {
      return false
    }
    return true
  }
}

class Container {
  constructor(list) {
    this.list = list
  }
  // 生成遍历器
  getIterator() {
    return new Iterator(this)
  }
}

// test
let container = new Container([1, 2, 3, 4, 5, 6])
let iterator = contianer.getIterator()
while(iterator.hasNext()) {
  console.log(iterator.next())
}

场景

• jQuery each

// 写出一个方法遍历这三种对象
funciton each(data) {
  let $data = $(data)  // 生成迭代器
  $data.each(function(key, p) {
    console.log(key, p)
  })
}

// test
each(arr)
each(nodeList)
each($p)

• ES6 Iterator
  为何存在？
• ES6语法中，有序集合的数据类型已经有很多
• Array Map Set String TpyedArray arguments NodeList
• 需要有一个统一的接口来遍历所有数据类型
  注意：object不是有序集合，可以用Map代替

是什么？

• 上面的数据类型，都有[Symbol.iterator]属性
• 属性值是函数，执行函数返回一个迭代器
• 这个迭代器就有next方法可以顺序迭代子元素
• 可运行Array.prototype[Symbol.iterator]来测试

function each(data) {
  // 生成遍历器
  let iterator = data[Symbol.iterator]()
  let item = {done: false}
  while(!item.done) {
    item = iterator.next()
    if (!item.done) {
      console.log(item.value)
    }
  }
}

// test
let arr = [1, 2, 3, 4]
let nodeList = document.getElementsByTagName('p')
let m = new Map()
m.set('a', 100)
m.set('b', 200)
each(arr)
each(nodeList)
each(m)

ES6 Iterator 与Generator

• Iterator的价值不限于上述几个类型的遍历
• 还有Generator 函数的使用
• 即只要返回的数据符合Iterator接口的要求
• 即可使用Iterator语法，这就是迭代器模式

设计原则验证

• 迭代器对象和目标对象分离
• 迭代器将使用者与目标对象隔离开
• 符合开放封闭原则