在 vue 的項(xiàng)目中,有時(shí)我們會(huì)用到全局事件總線來管理組件之間的通信。vue2 項(xiàng)目里我們可以自己借助 $emit
、 $on
和 $off
封裝一個(gè) eventHub
;vue3 中 $on
和 $off
被移除了,我們可以使用 mitt 庫(kù)或 tiny-emitter 庫(kù)。在 node 里,則不用這么麻煩,其有個(gè)內(nèi)置的 events 模塊就可以幫我們實(shí)現(xiàn)對(duì)于事件的監(jiān)聽和發(fā)射。
事件的監(jiān)聽和發(fā)射
先使用 CommonJS 的語法導(dǎo)入得到 EventEmitter
類,然后生成實(shí)例 emitter
(EventEmitter
十分重要,比如后續(xù)文章會(huì)介紹的 stream
就是 EventEmitter
的實(shí)例):
const EventEmitter = require('events') const emitter = new EventEmitter()
接著就可以使用 emitter.on()
對(duì)事件進(jìn)行監(jiān)聽,傳入的第 1 個(gè)參數(shù)就是事件名稱,第 2 個(gè)參數(shù)為監(jiān)聽到事件被發(fā)射后要執(zhí)行的回調(diào),如果發(fā)射事件時(shí)有傳入?yún)?shù),會(huì)傳遞給回調(diào)函數(shù),可以一個(gè)個(gè)單獨(dú)獲取,也可以像下面這樣使用函數(shù)的剩余參數(shù)獲?。? 【相關(guān)教程推薦:nodejs視頻教程、編程教學(xué)】
// 監(jiān)聽事件 emitter.on('test', (...args) => { console.log(args) // [ 1, 2, 3 ] }) // 發(fā)射事件 emitter.emit('test', 1, 2, 3)
如果只需要監(jiān)聽一次性事件,可以使用 emitter.once()
:
emitter.once('test', () => { console.log('監(jiān)聽到了事件發(fā)射') }) emitter.emit('test') emitter.emit('test') // 本次發(fā)射不會(huì)觸發(fā)打印
如果有多個(gè)地方如下例所示對(duì)事件進(jìn)行了監(jiān)聽,一旦事件發(fā)射,那么監(jiān)聽回調(diào)會(huì)按順序依次觸發(fā):
emitter.on('test', () => { console.log('監(jiān)聽到了事件發(fā)射,1') }) emitter.on('test', () => { console.log('監(jiān)聽到了事件發(fā)射,2') }) emitter.emit('test')
執(zhí)行結(jié)果:
如果想把監(jiān)聽事件添加到最前面,可以使用 emitter.prependListener()
(或者 emitter.prependOnceListener()
,即提前但只監(jiān)聽一次):
emitter.on('test', () => { console.log('監(jiān)聽到了事件發(fā)射,1') }) emitter.prependListener('test', () => { console.log('監(jiān)聽到了事件發(fā)射,2') }) emitter.emit('test')
現(xiàn)在的結(jié)果如下:
移除事件監(jiān)聽
可以使用 emitter.off()
(或者 emitter.removeListener()
)移除對(duì)事件的監(jiān)聽,但需要傳入對(duì)應(yīng)的事件名稱和回調(diào)函數(shù),所以我們?cè)诒O(jiān)聽時(shí)的回調(diào)就不能直接像上面這樣定義在 emitter.on()
內(nèi)部了,需要在外部定義然后傳入對(duì)該回調(diào)的引用:
function handler(...args) { console.log(args) // [ 1, 2, 3 ] } emitter.on('test', handler) emitter.emit('test', 1, 2, 3) emitter.off('test', handler) emitter.emit('test', '無法被監(jiān)聽到')
emitter.off()
只能移除一個(gè)監(jiān)聽,且必須傳入監(jiān)聽回調(diào),如果有多次監(jiān)聽,想全部移除,可以使用 emitter.removeAllListeners()
:
emitter.on('test', handler) emitter.on('test', handler) emitter.on('test', handler) emitter.removeAllListeners()
emitter.removeAllListeners()
如果不傳入任何參數(shù),則移除所有事件名稱的所有事件監(jiān)聽。其還可以傳入事件名稱,則移除對(duì)應(yīng)事件名稱的所有事件監(jiān)聽。
其它一些方法
監(jiān)聽器數(shù)量限制
1 個(gè) EventEmitter 對(duì)象上,某個(gè)事件名稱的最大監(jiān)聽器數(shù)量默認(rèn)為 10,這可以通過 emitter.getMaxListeners()
來驗(yàn)證:
console.log(emitter.getMaxListeners()) // 10
比如寫了 11 次 emitter.on('test', handler)
,就會(huì)報(bào)錯(cuò),提示說要用 emitter.setMaxListeners()
來增加最大限制數(shù)量:
如果我們想知道當(dāng)前 EventEmitter 對(duì)象上某個(gè)事件名稱的監(jiān)聽器有多少個(gè),有沒有超過最大限制,可以使用 emitter.listenerCount()
傳入事件名稱查看:
console.log(emitter.listenerCount('test'))
獲取事件名稱和監(jiān)聽器
使用 emitter.eventNames()
可以獲取當(dāng)前 EventEmitter 對(duì)象上注冊(cè)的所有事件名稱,返回的是由事件字符串組成的數(shù)組:
emitter.on('test1', handler) emitter.on('test2', handler) console.log(emitter.eventNames()) // [ 'test1', 'test2' ]
如果想獲取某個(gè)事件對(duì)應(yīng)的所有監(jiān)聽器,可以使用 emitter.listeners()
并傳入事件名稱:
function handler1() {} function handler2() {} emitter.on('test', handler1) emitter.on('test', handler2) console.log(emitter.listeners('test'))
得到的結(jié)果如下: