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

话不多说，直接先上代码

发布订阅

class Emitter {

    static topics = {}

    constructor () {}

    subscribe (topic, callback) {
        if (!Emitter.topics[topic]) {
            Emitter.topics[topic] = []
        }
        Emitter.topics[topic].push(callback)
    }

    publish (topic, data) {
        Emitter.topics[topic]?.forEach(callback => callback(data))
    }

}

const emitter = new Emitter()
emitter.subscribe('message', (data) => console.log(data))
emitter.publish('message', 'are you ok?')

观察者模式

class Subject {
    constructor () {
        this.observers = []
    }

    addObserver (observer) {
        this.observers.push(observer)
    }

    notifyObservers (data) {
        this.observers.forEach(observer => observer.update(data))
    }
}

class Observer {
    constructor (name) {
        this.name = name
        this.data = null
    }

    update (data) {
        this.data = data
    }
}

const subject = new Subject()
const observer1 = new Observer('ccc')
const observer2 = new Observer('ddd')

subject.addObserver(observer1)
subject.addObserver(observer2)

subject.notifyObservers('are you ok?')

所以我们从代码中就能比较明显的看出这两种模式之间的区别来。

1. 通知方式：

• 发布-订阅模式中，发布者（或称为主题）和订阅者之间是通过消息代理或事件通道来进行通信的，发布者将消息发布到通道，订阅者从通道订阅感兴趣的消息，并在消息到达时接收通知。
• 观察者模式中，观察者直接注册到主题对象，并在主题对象状态变化时直接接收通知。

2. 关系类型：

• 发布-订阅模式中，发布者和订阅者之间通常是松散耦合的关系，发布者不需要知道订阅者的具体信息，订阅者也不需要知道发布者的具体信息。
• 观察者模式中，观察者和主题之间是紧密耦合的关系，观察者需要直接注册到主题对象，并且主题对象需要保持对观察者的引用。

更具体的场景

• 观察者模式：其实我们事件的绑定就可以看作是一种观察者模式，节点是主题，而addEventListener则是添加一个观察者.

  document.querySelector('#id').addEventListener('click', () => console.log('click'))
  

• 发布订阅模式：如果你是Vue开发者，你应该对Vue2的bus有所耳闻，尽管bus不是一种好的方案去解决跨组件事件触发和数据共享问题，但是不得不说它确实是管用的。这其中的事件触发就是一种发布订阅模式。

  // bus.js
  const bus = new Vue()
  
  // component 1
  bus.$emit('ikun', 'sing dance rap basketboll')
  // component 2
  bus.$on('ikun', (data) => console.log(data, 'Chicken, you are so beautiful'))
  

所以我们可以看到设计模式其实就经常藏在我们的日常编码中，只是我们没有发觉。主动去学习设计模式，可以让我们写出更容易理解和维护的代码