1.模式差異
- 在觀察者模式中幔嗦，觀察者是知道Subject的虎敦，Subject一直保持對(duì)觀察者進(jìn)行記錄游岳。然而政敢，在發(fā)布訂閱模式中，發(fā)布者和訂閱者不知道對(duì)方的存在胚迫。它們只有通過消息代理進(jìn)行通信喷户。
- 在發(fā)布訂閱模式中，組件是松散耦合的晌区，正好和觀察者模式相反摩骨。
- 觀察者模式大多數(shù)時(shí)候是同步的，比如當(dāng)事件觸發(fā)朗若，Subject就會(huì)去調(diào)用觀察者的方法恼五。而發(fā)布-訂閱模式大多數(shù)時(shí)候是異步的（使用消息隊(duì)列）。
-
觀察者 模式需要在單個(gè)應(yīng)用程序地址空間中實(shí)現(xiàn)哭懈，而發(fā)布-訂閱更像交叉應(yīng)用模式灾馒。
觀察者模式和發(fā)布訂閱模式
2、代碼實(shí)現(xiàn)觀察者模式和發(fā)布訂閱模式
1.1 觀察者模式：
// 觀察者
class Observer {
constructor() {
}
update(val) {
console.log(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 < obCount; index++) {
this.observers.get(index).update(...args);
}
}
}
const subject = new Subject();
const ob1 = new Observer();
const ob2 = new Observer();
subject.addObserver(ob1);
subject.addObserver(ob2);
subject.notify(1234); // 輸出兩次 1234
使用subject.notify()方法的時(shí)候會(huì)調(diào)度所有觀察者遣总，本例中有兩個(gè)觀察者ob1睬罗、ob2,所以會(huì)輸出兩次1234
Subject實(shí)例
觀察模式圖解：
觀察模式圖解
1.2 發(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;
const index = listeners.indexOf(fn);
this.subscribers[type] = listeners.splice(index, 1);
}
publish(type, ...args) {
let listeners = this.subscribers[type];
if (!listeners || !listeners.length) return;
listeners.forEach(fn => fn(...args));
}
}
let ob = new PubSub();
function oneFunction(val){console.log('one參數(shù)'+val)}
function twoFunction(val){console.log('two參數(shù)'+val)}
ob.subscribe('one',oneFunction);
ob.subscribe('two',twoFunction);
ob.publish('one',1); // one參數(shù)1
ob.publish('two',2); // two參數(shù)2
在「一對(duì)多」的場(chǎng)景下旭斥，發(fā)布者更新可以通知它的部分訂閱者容达，例如本例中one和two可以分開訂閱消息，不像觀察者模式主體（subject）發(fā)生變化所有的觀察者（ob1和ob2）都得到通知垂券。
發(fā)布訂閱模式圖解
參考文章：
觀察者模式和發(fā)布訂閱模式的區(qū)別
觀察者模式（Observer）和發(fā)布（Publish）/訂閱模式（Subscribe）的區(qū)別
設(shè)計(jì)模式之發(fā)布訂閱模式(1) 一文搞懂發(fā)布訂閱模式
