引言

在 vue 的項(xiàng)目中，有時(shí)我們會(huì)用到全局事件總線來(lái)管理組件之間的通信。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)聽(tīng)和發(fā)射。

事件的監(jiān)聽(tīng)和發(fā)射

先使用 CommonJS 的語(yǔ)法導(dǎo)入得到 EventEmitter 類(lèi)，然后生成實(shí)例 emitter（EventEmitter 十分重要，比如后續(xù)文章會(huì)介紹的 stream 就是 EventEmitter 的實(shí)例）：

const EventEmitter = require('events')
const emitter = new EventEmitter()

接著就可以使用 emitter.on() 對(duì)事件進(jìn)行監(jiān)聽(tīng)，傳入的第 1 個(gè)參數(shù)就是事件名稱，第 2 個(gè)參數(shù)為監(jiān)聽(tīng)到事件被發(fā)射后要執(zhí)行的回調(diào)，如果發(fā)射事件時(shí)有傳入?yún)?shù)，會(huì)傳遞給回調(diào)函數(shù)，可以一個(gè)個(gè)單獨(dú)獲取，也可以像下面這樣使用函數(shù)的剩余參數(shù)獲?。?/p>

// 監(jiān)聽(tīng)事件
emitter.on('test', (...args) => {
  console.log(args) // [ 1, 2, 3 ]
})
// 發(fā)射事件
emitter.emit('test', 1, 2, 3)

如果只需要監(jiān)聽(tīng)一次性 事件，可以使用 emitter.once()：

emitter.once('test', () => {
  console.log('監(jiān)聽(tīng)到了事件發(fā)射')
})
emitter.emit('test')
emitter.emit('test') // 本次發(fā)射不會(huì)觸發(fā)打印

如果有多個(gè)地方如下例所示對(duì)事件進(jìn)行了監(jiān)聽(tīng)，一旦事件發(fā)射，那么監(jiān)聽(tīng)回調(diào)會(huì)按順序依次觸發(fā)：

emitter.on('test', () => {
  console.log('監(jiān)聽(tīng)到了事件發(fā)射，1')
})
emitter.on('test', () => {
  console.log('監(jiān)聽(tīng)到了事件發(fā)射，2')
})
emitter.emit('test')

執(zhí)行結(jié)果：

如果想把監(jiān)聽(tīng)事件添加到最前面，可以使用 emitter.prependListener()（或者 emitter.prependOnceListener()，即提前但只監(jiān)聽(tīng)一次）：

emitter.on('test', () => {
  console.log('監(jiān)聽(tīng)到了事件發(fā)射，1')
})
emitter.prependListener('test', () => {
  console.log('監(jiān)聽(tīng)到了事件發(fā)射，2')
})
emitter.emit('test')

現(xiàn)在的結(jié)果如下：

移除事件監(jiān)聽(tīng)

可以使用 emitter.off()（或者 emitter.removeListener()）移除對(duì)事件的監(jiān)聽(tīng)，但需要傳入對(duì)應(yīng)的事件名稱和回調(diào)函數(shù)，所以我們?cè)诒O(jiān)聽(tīng)時(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', '無(wú)法被監(jiān)聽(tīng)到')

emitter.off()只能移除一個(gè)監(jiān)聽(tīng)，且必須傳入監(jiān)聽(tīng)回調(diào)，如果有多次監(jiān)聽(tīng)，想全部移除，可以使用 emitter.removeAllListeners()：

emitter.on('test', handler)
emitter.on('test', handler)
emitter.on('test', handler)
emitter.removeAllListeners()

emitter.removeAllListeners()如果不傳入任何參數(shù)，則移除所有事件名稱的所有事件監(jiān)聽(tīng)。其還可以傳入事件名稱，則移除對(duì)應(yīng)事件名稱的所有事件監(jiān)聽(tīng)。

其它一些方法

監(jiān)聽(tīng)器數(shù)量限制

1 個(gè) EventEmitter 對(duì)象上，某個(gè)事件名稱的最大監(jiān)聽(tīng)器數(shù)量默認(rèn)為 10，這可以通過(guò) emitter.getMaxListeners() 來(lái)驗(yàn)證：

console.log(emitter.getMaxListeners()) // 10

比如寫(xiě)了 11 次 emitter.on('test', handler)，就會(huì)報(bào)錯(cuò)，提示說(shuō)要用 emitter.setMaxListeners() 來(lái)增加最大限制數(shù)量：

如果我們想知道當(dāng)前 EventEmitter 對(duì)象上某個(gè)事件名稱的監(jiān)聽(tīng)器有多少個(gè)，有沒(méi)有超過(guò)最大限制，可以使用 emitter.listenerCount() 傳入事件名稱查看：

console.log(emitter.listenerCount('test'))

獲取事件名稱和監(jiān)聽(tīng)器

使用 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)聽(tīng)器，可以使用 emitter.listeners() 并傳入事件名稱：

function handler1() {}
function handler2() {}
emitter.on('test', handler1)
emitter.on('test', handler2)
console.log(emitter.listeners('test'))

得到的結(jié)果如下：

以上就是Node.js內(nèi)置模塊events事件監(jiān)聽(tīng)發(fā)射詳解的詳細(xì)內(nèi)容，更多關(guān)于Node.js events事件監(jiān)聽(tīng)發(fā)射的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論