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

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

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')​​
相关推荐
yshhuang几秒前
在Windows上搭建开发环境
前端·后端
littleplayer1 分钟前
Redux在iOS中的使用
前端
跟橙姐学代码3 分钟前
Python里的“管家婆”:带你玩转os库的所有神操作
前端·python·ipython
jingling5553 分钟前
uniapp | 快速上手ThorUI组件
前端·笔记·前端框架·uni-app
UrbanJazzerati3 分钟前
可拖拽的进度条组件实战:实现思路与Demo
前端·面试
Cache技术分享6 分钟前
188. Java 异常 - Java 异常处理规范
前端·后端
不一样的少年_9 分钟前
Vue3 后台分页写腻了?我用 1 个 Hook 删掉 90% 重复代码(附源码)
前端·vue.js·设计模式
一枚前端小能手13 分钟前
🔥 滚动监听写到手抽筋?IntersectionObserver让你躺平实现懒加载
前端·javascript
我是日安13 分钟前
从零到一打造 Vue3 响应式系统 Day 5 - 核心概念:单向链表、双向链表
前端·vue.js
骑自行车的码农14 分钟前
React SSR 技术解读
前端·react.js