Javascriptデザインパターンシステムの説明とアプリケーション-研究ノート9-iteratorパターン

イテレータモード

• コレクションへの順次アクセス
• ユーザーはコレクションの内部構造を知る必要はありません（カプセル化）

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構文では、順序集合のデータ型はすでに多数あります
• 配列マップセット文字列TpyedArray引数NodeList
• すべてのデータ型をトラバースするには、統一されたインターフェースが必要です。
  注：オブジェクトは順序付けられたコレクションではないため、代わりにMapを使用できます。

それは何ですか？

• 上記のデータ型には[Symbol.iterator]属性があります
• 属性値は関数であり、関数を実行するとイテレータが返されます
• このイテレータには、子要素を順番に反復する次のメソッドがあります
• 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の値は、上記のタイプのトラバーサルに限定されません。
• そしてジェネレーター機能の使用
• つまり、返されたデータがIteratorインターフェイスの要件を満たしている限り
• イテレータモードであるイテレータ構文を使用できます

設計原理の検証

• イテレータオブジェクトをターゲットオブジェクトから分離します
• イテレータは、ユーザーをターゲットオブジェクトから分離します
• オープンおよびクローズド原則に準拠する