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

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

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')​​
相关推荐
小蜜蜂嗡嗡8 分钟前
flutter封装vlcplayer的控制器
前端·javascript·flutter
一tiao咸鱼11 分钟前
如何简单使用 prompt
前端·aigc
cdbqss116 分钟前
VB.net编写的身份证类
前端·.net
骑自行车的码农34 分钟前
React短文系列 遍历fiber树 App的创建
前端·react.js
AskSky37 分钟前
为了搞一个完美的健身APP,我真是费尽心机
前端
斯~内克43 分钟前
基于Vue.js和PDF-Lib的条形码生成与批量打印方案
前端·vue.js·pdf
阴阳怪气乌托邦44 分钟前
别再啃OA代码了!低代码"搭积木"式搞数智化,我直接少写500行
前端·低代码
beelan1 小时前
v-on的思考
前端
山河木马1 小时前
前端学习C++之:.h(.hpp)与.cpp文件
前端·javascript·c++
用户9272472502191 小时前
PHP + CSS + JS + JSON 数据采集与展示系统,支持伪静态
前端