Объяснение и применение системы шаблонов проектирования Javascript —— заметки для изучения Шаблон с девятью итераторами

Режим итератора

• Последовательный доступ к коллекции
• Пользователю не нужно знать внутреннюю структуру коллекции (инкапсуляция)

Схема классов UML упрощенной версии JS

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
• Для просмотра всех типов данных необходим единый интерфейс.
  Примечание: объект не является упорядоченной коллекцией, вместо него можно использовать 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.
• Вы можете использовать синтаксис Iterator, который является режимом итератора

Проверка принципа конструкции

• Отделите объект-итератор от целевого объекта
• Итераторы изолируют пользователя от целевого объекта
• Соблюдать принцип открытого и закрытого