上兩篇文章, 根據(jù)這兩篇文章學(xué)習(xí)的這兩種模式
重學(xué)JS（九）—— 觀察者模式和發(fā)布/訂閱模式真不一樣
從一道面試題簡(jiǎn)單談?wù)劙l(fā)布訂閱和觀察者模式
1. 發(fā)布訂閱模式:
- 包含發(fā)布者昌屉，事件調(diào)度中心凤粗，訂閱者三個(gè)角色
- 發(fā)布者和訂閱者是松散耦合的，互不關(guān)心對(duì)方是否存在，他們關(guān)注的是事件本身。
- 發(fā)布者借用事件調(diào)度中心提供的publish方法發(fā)布事件，而訂閱者則通過subscribe進(jìn)行訂閱
我們來實(shí)現(xiàn)一下
class PubSub
{
constructor() {
// 維護(hù)所有時(shí)間以及訂閱行為
this.events = {};
}
/**
* 訂閱事件
* @param {string} event 訂閱的事件名稱
* @param {function} fn 回調(diào)函數(shù)
*/
subscribe( event, fn ) {
if ( !this.events[event] ) {
this.events[event] = [];
}
// 將回調(diào)放入該事件下等待被觸發(fā)
this.events[event].push(fn);
}
/**
* 發(fā)布事件
* @param {string} event 事件名稱
* @param {...any} ...args 傳遞給事件的參數(shù)列表
*/
publish( event, ...args ) {
if (this.events[event] ) { // 如果事件已經(jīng)注冊(cè)
// 調(diào)用事件的所有訂閱行為并傳入相應(yīng)參數(shù)
this.events[event].forEach( fn => fn(...args) )
}
}
/**
* 移除某個(gè)事件的一個(gè)訂閱行為
* @param {string} event 事件名稱
* @param {funtion} fn 訂閱回調(diào)函數(shù)
*/
unsubscribe( event, fn ) {
if (this.events[event]) {
// 找到該事件訂閱函數(shù)的下標(biāo)位置
const targetIndex = this.events[event].findIndex(item => item === fn)
// findIndex() 方法返回傳入一個(gè)測(cè)試條件（函數(shù)）符合條件的數(shù)組第一個(gè)元素位置季稳。
// 當(dāng)數(shù)組中的元素在測(cè)試條件時(shí)返回 true 時(shí), findIndex() 返回符合條件的元素的索引位置，之后的值不會(huì)再調(diào)用執(zhí)行函數(shù)澈魄。
// 如果沒有符合條件的元素返回 -1
// 刪除該事件下指定的訂閱行為
if (targetIndex !== -1) {
this.events[event].splice(targetIndex, 1)
}
// 該事件下無訂閱行為時(shí)直接刪除該訂閱事件
if (this.events[event].length === 0) {
delete this.events[event]
}
}
}
/**
* 移除某個(gè)事件的所有訂閱行為
* @param {string} event 事件名稱
*/
unsubscribeAll(event) {
if (this.events[event]) {
delete this.events[event]
}
}
}
執(zhí)行一下:
image.png
刪除指定事件的某個(gè)訂閱行為
image.png
刪除指定事件的全部訂閱行為以及事件本身
image.png
2.觀察者模式
- 在觀察者模式中景鼠，只有兩個(gè)主體，分別是目標(biāo)對(duì)象Subject痹扇，觀察者Observer
- 觀察者Observer需要實(shí)現(xiàn)update方法铛漓，供目標(biāo)對(duì)象調(diào)用。update方法中可以執(zhí)行自定義的業(yè)務(wù)代碼鲫构。
- 目標(biāo)對(duì)象Subject也通常被叫做被觀察者或主題浓恶，它的職能很單一，可以理解為结笨，它只管理一種事件包晰。Subject需要維護(hù)自身的觀察者數(shù)組observerList湿镀，當(dāng)自身發(fā)生變化時(shí)，通過調(diào)用自身的notify方法伐憾，依次通知每一個(gè)觀察者執(zhí)行update方法勉痴。
// 觀察者
class Observer {
/**
* 構(gòu)造器
* @param {function} fn 回調(diào)函數(shù)，收到目標(biāo)對(duì)象通知時(shí)執(zhí)行
*/
constructor(fn) {
if (typeof fn === 'function') {
this.fn = fn
} else {
throw new Error('Observer構(gòu)造器必須傳入函數(shù)類型树肃！')
}
}
/**
* 被目標(biāo)對(duì)象通知時(shí)執(zhí)行
*/
update() {
this.fn()
}
}
// 目標(biāo)對(duì)象
class Subject {
constructor() {
// 維護(hù)觀察者列表
this.observerList = []
}
/**
* 添加一個(gè)觀察者
* @param {Observer} observer Observer實(shí)例
*/
addObserver(observer) {
this.observerList.push(observer)
}
/**
* 通知所有的觀察者
*/
notify() {
this.observerList.forEach(observer => observer.update() )
}
}
image.png
差異
- 在觀察者模式中蒸矛，觀察者需要直接訂閱目標(biāo)事件。在目標(biāo)發(fā)出內(nèi)容改變的事件后胸嘴，直接接收事件并作出響應(yīng)雏掠。
- 發(fā)布訂閱模式相比觀察者模式多了個(gè)事件通道，訂閱者和發(fā)布者不是直接關(guān)聯(lián)的筛谚。
這里再放一張文章1下面的一個(gè)評(píng)論 便于理解
image.png
