JavaScript事件發布/訂閱模式原理與用法分析

2019-11-19 13:12:11

字體：大中小

來源：轉載

供稿：網友

本文實例講述了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、輸出：