觀察者模式

定義

觀察者模式定義了對象間的一種一對多的依賴關(guān)系，當(dāng)一個(gè)對象的狀態(tài)發(fā)生改變時(shí)，所有依賴于它的對象都將得到通知，并自動更新

觀察者模式屬于行為型模式，行為型模式關(guān)注的是對象之間的通訊，觀察者模式就是觀察者和被觀察者之間的通訊

例如生活中，我們可以用報(bào)紙期刊的訂閱來形象的說明，當(dāng)你訂閱了一份報(bào)紙，每天都會有一份最新的報(bào)紙送到你手上，有多少人訂閱報(bào)紙，報(bào)社就會發(fā)多少份報(bào)紙

報(bào)社和訂報(bào)紙的客戶就形成了一對多的依賴關(guān)系

被觀察者知道觀察者的存在，同時(shí)管理所有的觀察者

實(shí)現(xiàn)

class Observer {update(params) {console.log(params)}
}class Demo {update(params) {console.log(params)}
}class ObserverList {constructor() {this.observerList = []}add(observer) {this.observerList.push(observer);return}delete(observer) {this.observerList = this.observerList.filter(ob => ob !== observer);return this;}get(index) {return this.observerList[index];}count() {return this.observerList.length;}
}class Subject {observers = new ObserverList;add(observer) {this.observers.add(observer)}remove(observer) {this.observers.delete(observer);}notify(...params) {for (let i = 0; i < this.observers.count(); i++) {let item = this.observers.get(i)item.update(...params)}}
}let sub = new Subject()
sub.add(new Observer)
sub.add(new Observer)
sub.add(new Demo)sub.notify('測試觀察者模式發(fā)出通知')

中介者模式

定義

在這個(gè)星型結(jié)構(gòu)中，同事對象不再直接與其他的同事對象聯(lián)系，通過中介者對象與另一個(gè)對象發(fā)生相互作用，中介者對象的存在保證了結(jié)構(gòu)上的穩(wěn)定，也就是說，系統(tǒng)的結(jié)構(gòu)不會因?yàn)樾聦ο蟮囊霂泶罅康男薷墓ぷ鳌?/p>

如果一個(gè)系統(tǒng)中對象之間存在多對多的相互關(guān)系，可以將對象之間的一些交互行為從各個(gè)對象之間分離出來，并集中封裝在一個(gè)中介者對象中，由中介者進(jìn)行統(tǒng)一的協(xié)調(diào)，這樣對象之間多對多的復(fù)雜關(guān)系就轉(zhuǎn)變?yōu)橄鄬唵蔚囊粚Χ嚓P(guān)系，通過引入中介者來簡化對象之間的復(fù)雜交互。

實(shí)現(xiàn)

以租房為例，租房者和房主都通過中介更新信息，中介將更新后的信息通知對應(yīng)的對象

class Tenant {constructor(name, mediator) {this.name = name;this.mediator = mediator}contract(message) {this.mediator.contract(message, this)}getMessage(message) {console.log(message)}
}class HouseOwner {constructor(name, mediator) {this.name = name;this.mediator = mediator}contract(message) {this.mediator.contract(message, this)}getMessage(message) {console.log(message)}
}class Mediator {constructor(houseOwner, tenant) {this.houseOwner = houseOwnerthis.tenant = tenant}contract(message, person) {if (person == this.houseOwner) {this.tenant.getMessage(message)} else {this.houseOwner.getMessage(message)}}getTenant() {return this.tenant}setTenant(tenant) {this.tenant = tenant}getHouseOwner() {return this.houseOwner}setHouseOwner(houseOwner) {this.houseOwner = houseOwner}
}let mediator = new Mediator()let tenant = new Tenant('tenant',mediator)
let houseOwner = new HouseOwner('houseOwner',mediator)
mediator.setTenant(tenant)
mediator.setHouseOwner(houseOwner)tenant.contract('你好房東 我是租客')
houseOwner.contract('你好租客 我是房東')

優(yōu)點(diǎn)

• 簡化交互：中介者模式簡化了對象之間的交互，它用中介者和租客房東的一對多交互代替了原來租客房東的多對多交互，一對多容易理解和擴(kuò)展，將原本難以理解的網(wǎng)狀結(jié)構(gòu)轉(zhuǎn)換為星型結(jié)構(gòu)
• 解耦租客房東對象：中介者模式可將各個(gè)租客房東對象解耦，有利于租客房東之間的松耦合，可以獨(dú)立改變和復(fù)用每一個(gè)租客房東和中介者，增加新的中介者和新的租客房東類都很方便，更好地符合開閉原則
• 減少租客房東子類個(gè)數(shù)：中介者將原本分布于多個(gè)對象間的行為集中起來，改變這些行為只需要生成新的中介者子類即可，這使得各個(gè)租客房東類可以被重用，無須對租客房東類進(jìn)行擴(kuò)展

缺點(diǎn)

中介者類復(fù)雜：由于具體中介者中包含了大量的同事之間的交互細(xì)節(jié)，可能會導(dǎo)致具體中介者類變得非常復(fù)雜，使得系統(tǒng)難以維護(hù)

發(fā)布訂閱模式

發(fā)布-訂閱是一種消息范式，消息的發(fā)送者（稱為發(fā)布者）不會將消息直接發(fā)送給特定的接收者（稱為訂閱者）。而是將發(fā)布的消息分為不同的類別，無需了解哪些訂閱者（如果有的話）可能存在

同樣的，訂閱者可以表達(dá)對一個(gè)或多個(gè)類別的興趣，只接收感興趣的消息，無需了解哪些發(fā)布者存在

class PubSub {constructor() {this.messages = {};this.listeners = {};}// 添加發(fā)布者publish(type, content) {const existContent = this.messages[type];if (!existContent) {this.messages[type] = [];}this.messages[type].push(content);}// 添加訂閱者subscribe(type, cb) {const existListener = this.listeners[type];if (!existListener) {this.listeners[type] = [];}this.listeners[type].push(cb);}// 通知notify(type) {const messages = this.messages[type];const subscribers = this.listeners[type] || [];subscribers.forEach((cb, index) => cb(messages[index]));}
}class Publisher {constructor(name, context) {this.name = name;this.context = context;}publish(type, content) {this.context.publish(type, content);}
}class Subscriber {constructor(name, context) {this.name = name;this.context = context;}subscribe(type, cb) {this.context.subscribe(type, cb);}
}const TYPE_A = 'music';
const TYPE_B = 'movie';
const TYPE_C = 'novel';const pubsub = new PubSub();const publisherA = new Publisher('publisherA', pubsub);
publisherA.publish(TYPE_A, 'we are young');
publisherA.publish(TYPE_B, 'the silicon valley');
const publisherB = new Publisher('publisherB', pubsub);
publisherB.publish(TYPE_A, 'stronger');
const publisherC = new Publisher('publisherC', pubsub);
publisherC.publish(TYPE_C, 'a brief history of time');const subscriberA = new Subscriber('subscriberA', pubsub);
subscriberA.subscribe(TYPE_A, res => {console.log('subscriberA received', res)
});
const subscriberB = new Subscriber('subscriberB', pubsub);
subscriberB.subscribe(TYPE_C, res => {console.log('subscriberB received', res)
});
const subscriberC = new Subscriber('subscriberC', pubsub);
subscriberC.subscribe(TYPE_B, res => {console.log('subscriberC received', res)
});pubsub.notify(TYPE_A);
pubsub.notify(TYPE_B);
pubsub.notify(TYPE_C);

靈感來源于：addEventListener DOM2事件綁定

• 給當(dāng)前元素的某一個(gè)事件行為，綁定多個(gè)不同的方法「事件池機(jī)制」
• 事件行為觸發(fā)，會依次通知事件池中的方法執(zhí)行
• 支持內(nèi)置事件{標(biāo)準(zhǔn)事件，例如：click、dblclick、mouseenter…}

應(yīng)用場景：凡是某個(gè)階段到達(dá)的時(shí)候，需要執(zhí)行很多方法「更多時(shí)候，到底執(zhí)行多少個(gè)方法不確定，需要編寫業(yè)務(wù)邊處理的」，我們都可以基于發(fā)布訂閱設(shè)計(jì)模式來管理代碼；創(chuàng)建事件池->發(fā)布計(jì)劃 向事件池中加入方法->向計(jì)劃表中訂閱任務(wù) fire->通知計(jì)劃表中的任務(wù)執(zhí)行

let sub = (function () {let pond = {};// 向事件池中追加指定自定義事件類型的方法const on = function on(type, func) {// 每一次增加的時(shí)候，驗(yàn)證當(dāng)前類型在事件池中是否已經(jīng)存在!Array.isArray(pond[type]) ? pond[type] = [] : null;let arr = pond[type];if (arr.includes(func)) return;arr.push(func);};// 從事件池中移除指定自定義事件類型的方法const off = function off(type, func) {let arr = pond[type],i = 0,item = null;if (!Array.isArray(arr)) throw new TypeError(`${type} 自定義事件在事件池中并不存在!`);for (; i < arr.length; i++) {item = arr[i];if (item === func) {// 移除掉// arr.splice(i, 1); //這樣導(dǎo)致數(shù)據(jù)塌陷arr[i] = null; //這樣只是讓集合中當(dāng)前項(xiàng)值變?yōu)閚ull，但是集合的機(jī)構(gòu)是不發(fā)生改變的「索引不變」；下一次執(zhí)行emit的時(shí)候，遇到當(dāng)前項(xiàng)是null，我們再去把其移除掉即可；break;}}};// 通知事件池中指定自定義事件類型的方法執(zhí)行const emit = function emit(type, ...params) {let arr = pond[type],i = 0,item = null;if (!Array.isArray(arr)) throw new TypeError(`${type} 自定義事件在事件池中并不存在!`);for (; i < arr.length; i++) {item = arr[i];if (typeof item === "function") {item(...params);continue;}//不是函數(shù)的值都移除掉即可,自己控制i的值arr.splice(i, 1);i--;}};return {on,off,emit};
})();const fn1 = () => console.log(1);
const fn2 = () => console.log(2);
const fn3 = () => {console.log(3);sub.off('A', fn1);sub.off('A', fn2);
};
const fn4 = () => console.log(4);
const fn5 = () => console.log(5);
const fn6 = () => console.log(6);sub.on('A', fn1);
sub.on('A', fn2);
sub.on('A', fn3);
sub.on('A', fn4);
sub.on('A', fn5);
sub.on('A', fn6);
setTimeout(() => {sub.emit('A');
}, 1000);setTimeout(() => {sub.emit('A');
}, 2000);

觀察者模式和發(fā)布訂閱模式的區(qū)別

• 觀察者模式：某公司給自己員工發(fā)月餅發(fā)粽子，是由公司的行政部門發(fā)送的，這件事不適合交給第三方，原因是“公司”和“員工”是一個(gè)整體

• 發(fā)布-訂閱模式：某公司要給其他人發(fā)各種快遞，因?yàn)椤肮尽焙汀捌渌恕笔仟?dú)立的，其唯一的橋梁是“快遞”，所以這件事適合交給第三方快遞公司解決
  上述過程中，如果公司自己去管理快遞的配送，那公司就會變成一個(gè)快遞公司，業(yè)務(wù)繁雜難以管理，影響公司自身的主營業(yè)務(wù)，因此使用何種模式需要考慮什么情況兩者是需要耦合的

• 在觀察者模式中，觀察者是知道Subject的，Subject一直保持對觀察者進(jìn)行記錄。然而，在發(fā)布訂閱模式中，發(fā)布者和訂閱者不知道對方的存在。它們只有通過消息代理進(jìn)行通信。

• 在發(fā)布訂閱模式中，組件是松散耦合的，正好和觀察者模式相反。

• 觀察者模式大多數(shù)時(shí)候是同步的，比如當(dāng)事件觸發(fā)，Subject就會去調(diào)用觀察者的方法。而發(fā)布-訂閱模式大多數(shù)時(shí)候是異步的（使用消息隊(duì)列）