Publicación / suscripción de eventos de JavaScript

1. El modelo de publicación / suscripción es también uno de los muchos patrones de diseño;

2. De esta manera, las operaciones asincrónicas se pueden manejar con bastante elegancia en es5;

3. ¿Qué es publicar / suscribirse? Demos una castaña:

Suponiendo que fn1, fn2 y fn3 pueden considerarse como el editor de un evento, un evento se publicará cuando se ejecute. En este momento, podemos suscribirnos y procesar estos eventos en lotes a través de un suscriptor de eventos, incluido su pedido. Cómo agregar un suscriptor de mensaje:

class AsyncFunArr {
  constructor (...arr) {
    this.funcArr = [...arr]
  }

  next () {
    const fn = this.funcArr.shift()
    if (typeof fn === 'function') fn()
  }

  run () {
    this.next()
  }
}

4. Llamar

//首先将fn1,fn2,fn3订阅
const asyncFunArr = new AsyncFunArr(fn1, fn2, fn3)

//fn1，fn2，fn3作为分布者分别调用其next()方法：
function fn1 () {
  console.log('Function 1')
  asyncFunArr.next()
}

function fn2 () {
  setTimeout(() => {
    console.log('Function 2')
    asyncFunArr.next()
  }, 500)
}

function fn3 () {
  console.log('Function 3')
  asyncFunArr.next()
}

5. Salida:

// Función 1
// Función 2

// Función 3

6. Resumen:

A través de los métodos anteriores, se pueden lograr muchas cosas, como solicitar datos de forma asincrónica.

7. Materiales de referencia: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/constructor