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

更新時間：2018年08月21日 09:57:24 作者：咕咚蘿卜

這篇文章主要介紹了JavaScript事件發(fā)布/訂閱模式,結(jié)合實例形式簡單分析了javascript發(fā)布/訂閱模式的概念、原理及簡單使用方法,需要的朋友可以參考下

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

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

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

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

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

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é)：

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

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

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

您可能感興趣的文章:

相關(guān)文章

js中int和string數(shù)據(jù)類型互相轉(zhuǎn)化實例
在本篇文章里小編給大家分享了關(guān)于js中int和string數(shù)據(jù)類型互相轉(zhuǎn)化實例和代碼，需要的朋友們學習下。
2019-01-01
原生JS+HTML5實現(xiàn)的可調(diào)節(jié)寫字板功能示例
這篇文章主要介紹了原生JS+HTML5實現(xiàn)的可調(diào)節(jié)寫字板功能,涉及javascript結(jié)合HTML5屬性動態(tài)操作頁面元素實現(xiàn)繪圖功能相關(guān)技巧,需要的朋友可以參考下
2018-08-08
underscore?防抖技巧學習示例
這篇文章主要為大家介紹了underscore?防抖技巧學習示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2022-12-12
TypeScript中import?type與import的區(qū)別詳析
ES6引入了模塊化,其設(shè)計思想是在編譯時就能確定模塊的依賴關(guān)系,以及輸入和輸出的變量,下面這篇文章主要給大家介紹了關(guān)于TypeScript中import?type與import區(qū)別的相關(guān)資料,需要的朋友可以參考下
2022-07-07
javascript css紅色經(jīng)典選項卡效果實現(xiàn)代碼
這篇文章主要為大家詳細介紹了javascript css紅色經(jīng)典選項卡效果的實現(xiàn)代碼,需要的朋友可以參考下
2016-05-05
JS+jQuery實現(xiàn)注冊信息的驗證功能
本文通過實例代碼給大家分享了基于js+jquery實現(xiàn)的注冊信息驗證功能，代碼簡單易懂，非常不錯，具有參考借鑒價值，需要的朋友參考下吧
2017-09-09
微信小程序用canvas實現(xiàn)電子簽名
這篇文章主要為大家詳細介紹了微信小程序用canvas實現(xiàn)電子簽名，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-07-07
JavaScript 中對象的深拷貝
在JavaScript中，對對象進行拷貝的場景比較常見。但是簡單的復(fù)制語句只能對對象進行淺拷貝，即復(fù)制的是一份引用，而不是它所引用的對象。而更多的時候，我們希望對對象進行深拷貝，避免原始對象被無意修改
2016-12-12
微信小程序使用progress組件實現(xiàn)顯示進度功能【附源碼下載】
這篇文章主要介紹了微信小程序使用progress組件實現(xiàn)顯示進度功能,涉及progress組件相關(guān)屬性設(shè)置操作技巧,并附帶源碼供讀者下載參考,需要的朋友可以參考下
2017-12-12
bootstrap組件之按鈕式下拉菜單小結(jié)
這篇文章主要介紹了bootstrap組件之按鈕式下拉菜單，包括單按鈕下拉菜單，分裂式下拉菜單和向上彈出式菜單，本文給大家介紹的非常詳細，需要的朋友參考下吧
2017-01-01