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

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

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')​​
相关推荐
遂心_24 分钟前
JavaScript 函数参数传递机制:一道经典面试题解析
前端·javascript
小徐_233334 分钟前
uni-app vue3 也能使用 Echarts?Wot Starter 是这样做的!
前端·uni-app·echarts
RoyLin38 分钟前
TypeScript设计模式:适配器模式
前端·后端·node.js
遂心_1 小时前
深入理解 React Hook:useEffect 完全指南
前端·javascript·react.js
Moonbit1 小时前
MoonBit 正式加入 WebAssembly Component Model 官方文档 !
前端·后端·编程语言
龙在天1 小时前
ts中的函数重载
前端
卓伊凡1 小时前
非常经典的Android开发问题-mipmap图标目录和drawable图标目录的区别和适用场景实战举例-优雅草卓伊凡
前端
前端Hardy1 小时前
HTML&CSS: 谁懂啊!用代码 “擦去”图片雾气
前端·javascript·css
前端Hardy1 小时前
HTML&CSS:好精致的导航栏
前端·javascript·css
天下无贼2 小时前
【手写组件】 Vue3 + Uniapp 手写一个高颜值日历组件(含跨月补全+今日高亮+选中状态)
前端·vue.js