观察者模式和发布订阅模式的区别

1.模式差异

• 在观察者模式中，观察者是知道Subject的，Subject一直保持对观察者进行记录。然而，在发布订阅模式中，发布者和订阅者不知道对方的存在。它们只有通过消息代理进行通信。
• 在发布订阅模式中，组件是松散耦合的，正好和观察者模式相反。
• 观察者模式大多数时候是同步的，比如当事件触发，Subject就会去调用观察者的方法。而发布-订阅模式大多数时候是异步的（使用消息队列）。

• 观察者 模式需要在单个应用程序地址空间中实现，而发布-订阅更像交叉应用模式。

  
  
  观察者模式和发布订阅模式

2、代码实现观察者模式和发布订阅模式

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];
    }
}
// 目标
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()方法的时候会调度所有观察者，本例中有两个观察者ob1、ob2,所以会输出两次1234

Subject实例

观察模式图解：

观察模式图解

1.2 发布订阅模式：

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参数'+val)}
function twoFunction(val){console.log('two参数'+val)}
ob.subscribe('one',oneFunction);
ob.subscribe('two',twoFunction);
ob.publish('one',1); // one参数1
ob.publish('two',2); // two参数2

在「一对多」的场景下，发布者更新可以通知它的部分订阅者，例如本例中one和two可以分开订阅消息，不像观察者模式主体（subject）发生变化所有的观察者（ob1和ob2）都得到通知。

发布订阅模式图解

参考文章：
观察者模式和发布订阅模式的区别
观察者模式（Observer）和发布（Publish）/订阅模式（Subscribe）的区别
设计模式之发布订阅模式(1) 一文搞懂发布订阅模式