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

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

1、观察者模式中只有观察者和被观察者,发布订阅模式中有发布者、订阅者、调度中心

2、观察者模式是被观察者发生变化时自己通知观察者,发布订阅模式是通过调度中心来进行分布订阅操作

发布订阅模式

javascript 复制代码
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', () => {
	
})

观察者模式

javascript 复制代码
 ​​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')​​
相关推荐
打不着的大喇叭35 分钟前
uniapp的光标跟随和打字机效果
前端·javascript·uni-app
无我Code40 分钟前
2025----前端个人年中总结
前端·年终总结·创业
程序猿阿伟43 分钟前
《前端路由重构:解锁多语言交互的底层逻辑》
前端·重构
Sun_light1 小时前
6个你必须掌握的「React Hooks」实用技巧✨
前端·javascript·react.js
爱学习的茄子1 小时前
深度解析JavaScript中的call方法实现:从原理到手写实现的完整指南
前端·javascript·面试
莫空00001 小时前
Vue组件通信方式详解
前端·面试
呆呆的心1 小时前
揭秘 CSS 伪元素:不用加标签也能玩转出花的界面技巧 ✨
前端·css·html
百锦再1 小时前
重新学习Vue中的按键监听和鼠标监听
javascript·vue.js·vue·计算机外设·click·up·down
susnm1 小时前
Dioxus 与数据库协作
前端·rust
优雅永不过时_v1 小时前
基于vite适用于 vue和 react 的Three.js低代码与Ai结合编辑器
前端·javascript