本文實(shí)例講述了JavaScript事件發(fā)布/訂閱模式原理與用法。分享給大家供大家參考，具體如下：

1、發(fā)布/訂閱模式也是諸多設(shè)計(jì)模式當(dāng)中的一種；

2、這種方式可以在es5下相當(dāng)優(yōu)雅地處理異步操作；

3、什么是發(fā)布/訂閱呢？我們舉個(gè)栗子：

假設(shè)fn1，fn2，fn3都可以視作一個(gè)事件的發(fā)布者，執(zhí)行它，就會(huì)發(fā)布一個(gè)事件。這個(gè)時(shí)候，我們可以通過一個(gè)事件的訂閱者去批量訂閱并處理這些事件，包括它們的先后順序。增加一個(gè)消息訂閱者的方法：

class AsyncFunArr { constructor (...arr) {  this.funcArr = [...arr] } next () {  const fn = this.funcArr.shift()  if (typeof fn === 'function') fn() } run () {  this.next() }}

4、調(diào)用

//首先將fn1,fn2,fn3訂閱const asyncFunArr = new AsyncFunArr(fn1, fn2, fn3)//fn1，fn2，fn3作為分布者分別調(diào)用其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、總結(jié)：

通過上述方法，可以實(shí)現(xiàn)很多，如異步請(qǐng)求數(shù)據(jù)等。

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

更多關(guān)于JavaScript相關(guān)內(nèi)容可查看本站專題：《javascript面向?qū)ο笕腴T教程》、《JavaScript切換特效與技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》

希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。