JavaScript事件发布/订阅

1、发布/订阅模式也是诸多设计模式当中的一种；

2、这种方式可以在es5下相当优雅地处理异步操作；

3、什么是发布/订阅呢？我们举个栗子：

假设fn1，fn2，fn3都可以视作一个事件的发布者，执行它，就会发布一个事件。这个时候，我们可以通过一个事件的订阅者去批量订阅并处理这些事件，包括它们的先后顺序。增加一个消息订阅者的方法：

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

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

  run () {
    this.next()
  }
}

4、调用

//首先将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、输出：

// Function 1
// Function 2

// Function 3

6、总结：

通过上述方法，可以实现很多，如异步请求数据等。

7、参考资料：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/constructor