建站
咨詢(xún)
售后
建站咨詢(xún)
新聞中心
之前一直對(duì)觀察者模式和發(fā)布訂閱模式的區(qū)別理解不深，正好這段時(shí)間在看vue源碼的分析，vue數(shù)據(jù)雙向綁定也用到了發(fā)布訂閱模式，于是又把這兩者探究了一番，今天做個(gè)筆記加強(qiáng)印象。
創(chuàng)新互聯(lián)建站是少有的成都網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)、營(yíng)銷(xiāo)型企業(yè)網(wǎng)站、微信平臺(tái)小程序開(kāi)發(fā)、手機(jī)APP,開(kāi)發(fā)、制作、設(shè)計(jì)、買(mǎi)友情鏈接、推廣優(yōu)化一站式服務(wù)網(wǎng)絡(luò)公司,從2013年開(kāi)始,堅(jiān)持透明化,價(jià)格低,無(wú)套路經(jīng)營(yíng)理念。讓網(wǎng)頁(yè)驚喜每一位訪客多年來(lái)深受用戶好評(píng)
觀察者模式和發(fā)布訂閱模式最大的區(qū)別就是發(fā)布訂閱模式有個(gè)事件調(diào)度中心。
從圖中可以看出，觀察者模式中觀察者和目標(biāo)直接進(jìn)行交互，而發(fā)布訂閱模式中統(tǒng)一由調(diào)度中心進(jìn)行處理，訂閱者和發(fā)布者互不干擾。這樣一方面實(shí)現(xiàn)了解耦，還有就是可以實(shí)現(xiàn)更細(xì)粒度的一些控制。比如發(fā)布者發(fā)布了很多消息，但是不想所有的訂閱者都接收到，就可以在調(diào)度中心做一些處理，類(lèi)似于權(quán)限控制之類(lèi)的。還可以做一些節(jié)流操作。
接下來(lái)看一下代碼實(shí)現(xiàn)
觀察者模式：
// 觀察者
class Observer {
constructor() {
}
update(val) {
}
}
// 觀察者列表
class ObserverList {
constructor() {
this.observerList = []
}
add(observer) {
return this.observerList.push(observer);
}
remove(observer) {
this.observerList = this.observerList.filter(ob => ob !== observer);
}
count() {
return this.observerList.length;
}
get(index) {
return this.observerList[index];
}
}
// 目標(biāo)
class Subject {
constructor() {
this.observers = new ObserverList();
}
addObserver(observer) {
this.observers.add(observer);
}
removeObserver(observer) {
this.observers.remove(observer);
}
notify(...args) {
let obCount = this.observers.count();
for (let index = 0; index 發(fā)布訂閱模式：
class PubSub {
constructor() {
this.subscribers = {}
}
subscribe(type, fn) {
if (!Object.prototype.hasOwnProperty.call(this.subscribers, type)) {
this.subscribers[type] = [];
}
this.subscribers[type].push(fn);
}
unsubscribe(type, fn) {
let listeners = this.subscribers[type];
if (!listeners || !listeners.length) return;
this.subscribers[type] = listeners.filter(v => v !== fn);
}
publish(type, ...args) {
let listeners = this.subscribers[type];
if (!listeners || !listeners.length) return;
listeners.forEach(fn => fn(...args));
}
}
let ob = new PubSub();
ob.subscribe('add', (val) => console.log(val));
ob.publish('add', 1);
從上面代碼可以看出，觀察者模式由具體目標(biāo)調(diào)度，每個(gè)被訂閱的目標(biāo)里面都需要有對(duì)觀察者的處理，會(huì)造成代碼的冗余。而發(fā)布訂閱模式則統(tǒng)一由調(diào)度中心處理，消除了發(fā)布者和訂閱者之間的依賴(lài)。
觀察者模式跟我們平時(shí)用的事件也有一定的關(guān)系，比如：
ele.addEventListener('click', () => {});
addEventListener就相當(dāng)于注冊(cè)了一個(gè)觀察者，當(dāng)觀察到‘click’事件的時(shí)候，作出一些處理。
分享標(biāo)題：觀察者模式和發(fā)布訂閱模式區(qū)別
網(wǎng)頁(yè)URL：http://www.5511xx.com/article/dpjsdce.html
