從一道面試題簡單談談發佈訂閱和觀察者模式

NO IMAGE

今天的話題是javascript中常被提及的「發佈訂閱模式和觀察者模式」,提到這,我不由得想起了一次面試。記得在去年的一次求職面試過程中,面試官問我,“你在項目中是怎麼處理非父子組件之間的通信的?”。我答道,“有用到vuex,有的場景也會用EventEmitter2”。面試官繼續問,“那你能手寫代碼,實現一個簡單的EventEmitter嗎?”

手寫EventEmitter

我猶豫了一會兒,想到使用EventEmitter2時,主要是用emit發事件,用on監聽事件,還有off銷燬事件監聽者,removeAllListeners銷燬指定事件的所有監聽者,還有once之類的方法。考慮到時間關係,我想著就先實現發事件,監聽事件,移除監聽者這幾個功能。當時可能有點緊張,不過有驚無險,在面試官給了一點提示後,順利地寫出來了!現在把這部分代碼也記下來。

class EventEmitter {
constructor() {
// 維護事件及監聽者
this.listeners = {}
}
/**
* 註冊事件監聽者
* @param {String} type 事件類型
* @param {Function} cb 回調函數
*/
on(type, cb) {
if (!this.listeners[type]) {
this.listeners[type] = []
}
this.listeners[type].push(cb)
}
/**
* 發佈事件
* @param {String} type 事件類型
* @param  {...any} args 參數列表,把emit傳遞的參數賦給回調函數
*/
emit(type, ...args) {
if (this.listeners[type]) {
this.listeners[type].forEach(cb => {
cb(...args)
})
}
}
/**
* 移除某個事件的一個監聽者
* @param {String} type 事件類型
* @param {Function} cb 回調函數
*/
off(type, cb) {
if (this.listeners[type]) {
const targetIndex = this.listeners[type].findIndex(item => item === cb)
if (targetIndex !== -1) {
this.listeners[type].splice(targetIndex, 1)
}
if (this.listeners[type].length === 0) {
delete this.listeners[type]
}
}
}
/**
* 移除某個事件的所有監聽者
* @param {String} type 事件類型
*/
offAll(type) {
if (this.listeners[type]) {
delete this.listeners[type]
}
}
}
// 創建事件管理器實例
const ee = new EventEmitter()
// 註冊一個chifan事件監聽者
ee.on('chifan', function() { console.log('吃飯了,我們走!') })
// 發佈事件chifan
ee.emit('chifan')
// 也可以emit傳遞參數
ee.on('chifan', function(address, food) { console.log(`吃飯了,我們去${address}吃${food}!`) })
ee.emit('chifan', '三食堂', '鐵板飯') // 此時會打印兩條信息,因為前面註冊了兩個chifan事件的監聽者
// 測試移除事件監聽
const toBeRemovedListener = function() { console.log('我是一個可以被移除的監聽者') }
ee.on('testoff', toBeRemovedListener)
ee.emit('testoff')
ee.off('testoff', toBeRemovedListener)
ee.emit('testoff') // 此時事件監聽已經被移除,不會再有console.log打印出來了
// 測試移除chifan的所有事件監聽
ee.offAll('chifan')
console.log(ee) // 此時可以看到ee.listeners已經變成空對象了,再emit發送chifan事件也不會有反應了

有了這個自己寫的簡單版本的EventEmitter,我們就不用依賴第三方庫啦。對了,vue也可以幫我們做這樣的事情。

const ee = new Vue();
ee.$on('chifan', function(address, food) { console.log(`吃飯了,我們去${address}吃${food}!`) })
ee.$emit('chifan', '三食堂', '鐵板飯')

所以我們可以單獨new一個Vue的實例,作為事件管理器導出給外部使用。想測試的朋友可以直接打開vue官網,在控制檯試試,也可以在自己的vue項目中實踐下哦。

發佈訂閱模式

其實仔細看看,EventEmitter就是一個典型的發佈訂閱模式,實現了事件調度中心。發佈訂閱模式中,包含發佈者,事件調度中心,訂閱者三個角色。我們剛剛實現的EventEmitter的一個實例ee就是一個事件調度中心,發佈者和訂閱者是鬆散耦合的,互不關心對方是否存在,他們關注的是事件本身。發佈者借用事件調度中心提供的emit方法發佈事件,而訂閱者則通過on進行訂閱。

如果還不是很清楚的話,我們把代碼換下單詞,是不是變得容易理解一點呢?

class PubSub {
constructor() {
// 維護事件及訂閱行為
this.events = {}
}
/**
* 註冊事件訂閱行為
* @param {String} type 事件類型
* @param {Function} cb 回調函數
*/
subscribe(type, cb) {
if (!this.events[type]) {
this.events[type] = []
}
this.events[type].push(cb)
}
/**
* 發佈事件
* @param {String} type 事件類型
* @param  {...any} args 參數列表
*/
publish(type, ...args) {
if (this.events[type]) {
this.events[type].forEach(cb => {
cb(...args)
})
}
}
/**
* 移除某個事件的一個訂閱行為
* @param {String} type 事件類型
* @param {Function} cb 回調函數
*/
unsubscribe(type, cb) {
if (this.events[type]) {
const targetIndex = this.events[type].findIndex(item => item === cb)
if (targetIndex !== -1) {
this.events[type].splice(targetIndex, 1)
}
if (this.events[type].length === 0) {
delete this.events[type]
}
}
}
/**
* 移除某個事件的所有訂閱行為
* @param {String} type 事件類型
*/
unsubscribeAll(type) {
if (this.events[type]) {
delete this.events[type]
}
}
}

畫圖分析

最後,我們畫個圖加深下理解:

從一道面試題簡單談談發佈訂閱和觀察者模式

特點

  • 發佈訂閱模式中,對於發佈者Publisher和訂閱者Subscriber沒有特殊的約束,他們好似是匿名活動,藉助事件調度中心提供的接口發佈和訂閱事件,互不瞭解對方是誰。
  • 鬆散耦合,靈活度高,常用作事件總線
  • 易理解,可類比於DOM事件中的dispatchEventaddEventListener

缺點

  • 當事件類型越來越多時,難以維護,需要考慮事件命名的規範,也要防範數據流混亂。

觀察者模式

觀察者模式與發佈訂閱模式相比,耦合度更高,通常用來實現一些響應式的效果。在觀察者模式中,只有兩個主體,分別是目標對象Subject,觀察者Observer

  • 觀察者需Observer要實現update方法,供目標對象調用。update方法中可以執行自定義的業務代碼。
  • 目標對象Subject也通常被叫做被觀察者或主題,它的職能很單一,可以理解為,它只管理一種事件。Subject需要維護自身的觀察者數組observerList,當自身發生變化時,通過調用自身的notify方法,依次通知每一個觀察者執行update方法。

按照這種定義,我們可以實現一個簡單版本的觀察者模式。

// 觀察者
class Observer {
/**
* 構造器
* @param {Function} cb 回調函數,收到目標對象通知時執行
*/
constructor(cb){
if (typeof cb === 'function') {
this.cb = cb
} else {
throw new Error('Observer構造器必須傳入函數類型!')
}
}
/**
* 被目標對象通知時執行
*/
update() {
this.cb()
}
}
// 目標對象
class Subject {
constructor() {
// 維護觀察者列表
this.observerList = []
}
/**
* 添加一個觀察者
* @param {Observer} observer Observer實例
*/
addObserver(observer) {
this.observerList.push(observer)
}
/**
* 通知所有的觀察者
*/
notify() {
this.observerList.forEach(observer => {
observer.update()
})
}
}
const observerCallback = function() {
console.log('我被通知了')
}
const observer = new Observer(observerCallback)
const subject = new Subject();
subject.addObserver(observer);
subject.notify();

畫圖分析

最後也整張圖理解下觀察者模式:

從一道面試題簡單談談發佈訂閱和觀察者模式

特點

  • 角色很明確,沒有事件調度中心作為中間者,目標對象Subject和觀察者Observer都要實現約定的成員方法。
  • 雙方聯繫更緊密,目標對象的主動性很強,自己收集和維護觀察者,並在狀態變化時主動通知觀察者更新。

缺點

我還沒體會到,這裡不做評價

結語

關於這個話題,網上文章挺多的,觀點上可能也有諸多分歧。重複造輪子,純屬幫助自己加深理解。

本人水平有限,以上僅是個人觀點,如有錯誤之處,還請斧正!如果能幫到您理解發布訂閱模式和觀察者模式,非常榮幸!

如果有興趣看看我這糟糕的代碼,請點擊github,祝大家生活愉快!

從一道面試題簡單談談發佈訂閱和觀察者模式

相關文章

來吧!一文徹底搞定哈希表!

使用curator實現分佈式master選舉

Docker學習筆記(三)——Docker常用命令

繼HTML、CSS和JavaScript之後,WebAssembly正式成為Web的第四種語言