JavaScript事件發(fā)布/訂閱模式原理與用法分析
本文實例講述了JavaScript事件發(fā)布/訂閱模式原理與用法。分享給大家供大家參考，具體如下：
1、發(fā)布/訂閱模式也是諸多設計模式當中的一種；
2、這種方式可以在es5下相當優(yōu)雅地處理異步操作；
3、什么是發(fā)布/訂閱呢？我們舉個栗子：
假設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相關內(nèi)容可查看本站專題：《javascript面向?qū)ο笕腴T教程》、《JavaScript切換特效與技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript錯誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學運算用法總結(jié)》
希望本文所述對大家JavaScript程序設計有所幫助。
- JavaScript實現(xiàn)與使用發(fā)布/訂閱模式詳解
- JavaScript中發(fā)布/訂閱模式的簡單實例
- JS前端設計模式之發(fā)布訂閱模式詳解
- js 發(fā)布訂閱模式的實例講解
- JavaScript設計模式之觀察者模式(發(fā)布訂閱模式)原理與實現(xiàn)方法示例
- JavaScript設計模式之觀察者模式與發(fā)布訂閱模式詳解
- 詳解JavaScript設計模式中的享元模式
- JavaScript設計模式之單例模式應用場景案例詳解
- JavaScript 設計模式 安全沙箱模式
- JavaScript設計模式之觀察者模式（發(fā)布者-訂閱者模式）
- javascript 發(fā)布-訂閱模式 實例詳解
相關文章
js中int和string數(shù)據(jù)類型互相轉(zhuǎ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)繪圖功能相關技巧,需要的朋友可以參考下2018-08-08
這篇文章主要為大家介紹了underscore?防抖技巧學習示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-12-12
TypeScript中import?type與import的區(qū)別詳析
ES6引入了模塊化,其設計思想是在編譯時就能確定模塊的依賴關系,以及輸入和輸出的變量,下面這篇文章主要給大家介紹了關于TypeScript中import?type與import區(qū)別的相關資料,需要的朋友可以參考下2022-07-07
javascript css紅色經(jīng)典選項卡效果實現(xiàn)代碼
這篇文章主要為大家詳細介紹了javascript css紅色經(jīng)典選項卡效果的實現(xiàn)代碼,需要的朋友可以參考下2016-05-05
本文通過實例代碼給大家分享了基于js+jquery實現(xiàn)的注冊信息驗證功能，代碼簡單易懂，非常不錯，具有參考借鑒價值，需要的朋友參考下吧2017-09-09
這篇文章主要為大家詳細介紹了微信小程序用canvas實現(xiàn)電子簽名，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
在JavaScript中，對對象進行拷貝的場景比較常見。但是簡單的復制語句只能對對象進行淺拷貝，即復制的是一份引用，而不是它所引用的對象。而更多的時候，我們希望對對象進行深拷貝，避免原始對象被無意修改2016-12-12
微信小程序使用progress組件實現(xiàn)顯示進度功能【附源碼下載】
這篇文章主要介紹了微信小程序使用progress組件實現(xiàn)顯示進度功能,涉及progress組件相關屬性設置操作技巧,并附帶源碼供讀者下載參考,需要的朋友可以參考下2017-12-12
這篇文章主要介紹了bootstrap組件之按鈕式下拉菜單，包括單按鈕下拉菜單，分裂式下拉菜單和向上彈出式菜單，本文給大家介紹的非常詳細，需要的朋友參考下吧2017-01-01