Aplicación y explicación del sistema de patrones de diseño de Javascript — notas de estudio Patrón de 9 iteradores

Modo iterador

• Acceso secuencial a una colección
• El usuario no necesita conocer la estructura interna de la colección (encapsulación)

Diagrama de clases UML de versión simplificada de 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())
}

Escenas

• 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
  ¿Por qué existe?
• En la sintaxis de ES6, ya hay muchos tipos de datos para conjuntos ordenados
• Array Map Set String Argumentos de TpyedArray NodeList
• Debe haber una interfaz unificada para atravesar todos los tipos de datos.
  Nota: el objeto no es una colección ordenada, puede usar Map en su lugar

¿Qué es?

• Los tipos de datos anteriores tienen atributos [Symbol.iterator]
• El valor del atributo es una función y la ejecución de la función devuelve un iterador
• Este iterador tiene un método siguiente para iterar los elementos secundarios en secuencia
• Ejecutar Array.prototype[Symbol.iterator]para probar

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)

Iterador ES6 与 Generador

• El valor de Iterator no se limita a los tipos de recorrido anteriores
• Y el uso de la función Generator
• Es decir, siempre que los datos devueltos cumplan con los requisitos de la interfaz del iterador
• Puede usar la sintaxis de iterador, que es el modo de iterador

Verificación del principio de diseño

• Separe el objeto iterador del objeto de destino
• Los iteradores aíslan al usuario del objeto de destino
• Cumplir con el principio abierto y cerrado.