JS设计模式(5): 发布订阅模式

smallluan

于 2025-06-08 10:09:38 发布

阅读量954

点赞数 37

分类专栏： js设计模式文章标签： javascript 设计模式开发语言

本文链接：https://blog.csdn.net/luanzi____/article/details/148509833

版权

js设计模式专栏收录该内容

5 篇文章

订阅专栏

解锁JavaScript发布订阅模式：让代码沟通更优雅

在JavaScript的世界里，我们常常会遇到这样的场景：多个模块之间需要相互通信，但是又不想让它们产生过于紧密的耦合。这时候，发布订阅模式就像一位优雅的信使，能够帮助我们实现模块间的解耦，让代码的结构更加清晰、可维护。今天，我们就来深入探讨一下JavaScript中的发布订阅模式，并用一段代码来揭开它的神秘面纱。

什么是发布订阅模式？

发布订阅模式（Publish/Subscribe Pattern）是一种消息范式，发布者（Publisher）不会将消息直接发送给特定的订阅者（Subscriber），而是将发布的消息分为不同的类别，无需了解哪些订阅者（如果有的话）可能存在。同样的，订阅者可以表达对一个或多个类别的兴趣，只接收感兴趣的消息，无需了解哪些发布者（如果有的话）存在。这种模式实现了发布者和订阅者之间的解耦，使得它们可以独立变化而互不影响。

在JavaScript的编程场景中，比如我们开发一个复杂的Web应用，有多个组件需要响应某个事件的变化，例如用户登录状态的改变、数据的更新等。如果采用传统的方式，组件之间可能需要相互引用、层层调用，这会导致代码的耦合度极高，后期维护和扩展都非常困难。而发布订阅模式则提供了一种更好的解决方案，它允许组件之间通过事件进行通信，组件只需要关心自己感兴趣的事件，而无需了解事件的来源和其他组件的内部实现。

发布订阅模式的实现

下面，我们通过一段代码来实现一个简单的发布订阅模式。我们创建一个EventEmitter类，它将作为我们的事件发射器，负责管理事件的订阅、发布和取消订阅等操作。

class EventEmitter {
  constructor () {
    this.event = {}
  }

  // 订阅事件
  on (eventName, callback) {
    if (!this.event[eventName]) {
      this.event[eventName] = []
    }
    this.event[eventName].push(callback)
    return this
  }

  // 发布事件
  emit (eventName, ...args) {
    if (this.event[eventName]) {
      this.event[eventName].forEach(callback => callback(...args))
    }
    return this
  }

  // 取消订阅
  off (eventName, callback) {
    if (this.event[eventName]) {
      this.event[eventName] = this.event[eventName].filter(cb => cb!== callback)
    }
    return this
  }

  // 单次订阅
  once (eventName, callback) {
    const wrapper = (...args) => {
      callback(...args)
      this.off(eventName, wrapper)
    }
    this.on(eventName, wrapper)
  }
}

在上述代码中，EventEmitter类的构造函数初始化了一个空对象event，用于存储不同事件名称对应的回调函数数组。on方法用于订阅事件，它会将传入的回调函数添加到对应事件名称的数组中。emit方法用于发布事件，当调用emit时，它会查找对应事件名称的回调函数数组，并依次执行数组中的每个回调函数，同时将传入的参数传递给回调函数。off方法用于取消订阅，它会从对应事件名称的回调函数数组中过滤掉指定的回调函数。once方法用于实现单次订阅，即回调函数只会执行一次，执行完毕后会自动取消订阅。

发布订阅模式的实际应用示例

为了更好地理解发布订阅模式的实际应用，我们来看一个具体的例子。假设我们有一个表示人的对象person，我们想要在其age属性发生变化时，通知其他相关的对象进行相应的处理。我们可以使用Proxy结合发布订阅模式来实现这个功能。

const eventBus = new EventEmitter()

const obj = {
  age: 21,
  onAgeChange: function (newAge) {
    this.age = newAge
    console.log('age 发生改变，现在是', this.age)
  }
}

const person = {
  age: 10,
}

const proxyPerson = new Proxy(person, {
  set: (target, key, newValue) => {
    eventBus.emit(`${key}Change`, newValue)
  }
})

eventBus.on('ageChange', obj.onAgeChange)

proxyPerson.age = 20
proxyPerson.age = 100

在这个例子中，我们首先创建了一个EventEmitter实例eventBus作为事件总线。然后，我们定义了一个obj对象，它包含一个age属性和一个onAgeChange方法，用于处理age属性变化的逻辑。接着，我们创建了一个person对象，并使用Proxy对其进行代理。在Proxy的set方法中，当person对象的属性发生变化时，我们通过eventBus发布一个ageChange事件，并将新的值作为参数传递出去。最后，我们通过eventBus的on方法将obj的onAgeChange方法订阅到ageChange事件上。当我们修改proxyPerson的age属性时，就会触发ageChange事件，obj的onAgeChange方法也会被调用，从而实现了age属性变化的通知和处理。

发布订阅模式的优势与注意事项

优势

解耦：发布者和订阅者之间没有直接的依赖关系，它们只通过事件进行通信。这样，当我们需要添加、删除或修改某个组件时，不会影响到其他组件，大大提高了代码的可维护性和扩展性。
灵活性：可以很方便地添加新的订阅者或发布者，而不需要修改已有的代码。例如，在我们的例子中，如果后续还有其他对象需要响应age属性的变化，只需要通过eventBus订阅ageChange事件即可。
可复用性：EventEmitter类可以在多个项目或模块中复用，减少了重复代码的编写。