观察者模式和发布订阅模式-Toy模板网

这篇具有很好参考价值的文章主要介绍了观察者模式和发布订阅模式。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

观察者模式与发布订阅模式的区别：
1、观察者模式中只有观察者和被观察者，发布订阅模式中有发布者、订阅者、调度中心
2、观察者模式是被观察者发生变化时自己通知观察者，发布订阅模式是通过调度中心来进行分布订阅操作

vue2中响应式数据就是由Object.defineProperty()和观察者模式结合实现的，进行依赖收集时（会收集当前组件的watcher），属性发生变化就会通知相关依赖进行更新操作。
vue2中父子组件之间通信时使用的vm.$on()和vm.$emit()这就属于发布订阅模式，还有vue2中的事件总线$bus也是。文章来源地址https://www.toymoban.com/news/detail-645079.html

发布订阅模式

class EventBus {
  constructor() {
    this.events = {}; // 存储事件及其对应的回调函数列表
  }

  // 订阅事件
  subscribe(eventName, callback) {
    this.events[eventName] = this.events[eventName] || []; // 如果事件不存在，创建一个空的回调函数列表
    this.events[eventName].push(callback); // 将回调函数添加到事件的回调函数列表中
  }

  // 发布事件
  publish(eventName, data) {
    if (this.events[eventName]) {
     this.events[eventName].forEach(callback => {
        callback(data); // 执行回调函数，并传递数据作为参数
      });
    }
  }

  // 取消订阅事件
  unsubscribe(eventName, callback) {
    if (this.events[eventName]) {
      this.events[eventName] = this.events[eventName].filter(cb => cb !== callback); // 过滤掉要取消的回调函数
    }
  }
}
const eventBus = new EventBus()
eventBus.subscribe('add', () => {
	
})

观察者模式

 class Dom {
     constructor() {
        // 订阅事件的观察者
        this.events = {}
     }

    /**
     * 添加事件的观察者
     * @param {String} event  订阅的事件
     * @param {Function} callback 回调函数(观察者)
     */
     addEventListener(event, callback) {
         if (!this.events[event]) {
            this.events[event] = []
        }
         this.events[event].push(callback)
     }
 
     removeEventListener(event, callback) {
        if (!this.events[event]) {
           return
        }
        const callbackList = this.events[event]
        const index = callbackList.indexOf(callback)
             if (index > -1) {
             callbackList.splice(index, 1)
         }
    }

    /**
    	* 触发事件
     	* @param {String} event
     */
     fireEvent(event) {
         if (!this.events[event]) {
            return
        }
         this.events[event].forEach(callback => {
             callback()
        })
    }
 }
 
 const handler = () => {
    console.log('fire click')
 }
 const dom = new Dom()
 
dom.addEventListener('click', handler)
dom.addEventListener('move', function() {
  console.log('fire click2')
 })
 
dom.fireEvent('click')