深入了解JavaScript发布订阅模式

什么是发布订阅模式？

发布订阅模式 是一种解耦的设计模式，它把服 务端提供的所有服务都抽象成订阅事件，客户端只需要订阅自己关注的服务即可，而不需要提前知道服务提供端的具体实现方式。服务端则维护着需要订阅的事件，同时维护了客户端列表，当某个事件被触发时，服务端向关注该事件的所有客户端发送通知。

实现发布订阅模式的步骤

• 定义事件总线对象

class EventBus {
  constructor() {
    this.events = {}
  }

  // 订阅事件
  on(type, listener) {
    const listeners = this.events[type] || []
    listeners.push(listener)
    this.events[type] = listeners
  }

  // 取消订阅事件
  off(type, listener) {
    const listeners = this.events[type] || []
    this.events[type] = listeners.filter(l => l !== listener)
  }

  // 触发事件
  emit(type, ...args) {
    const listeners = this.events[type] || []
    listeners.forEach(listener => {
      listener.apply(null, args)
    })
  }
}

• 订阅事件

const bus = new EventBus()
function handleData(data) {
  console.log('handleData', data)
}
bus.on('data', handleData)

• 触发事件

bus.emit('data', 123)

• 取消订阅事件

bus.off('data', handleData)

示例1

使用发布订阅模式，来实现一个模拟的登录功能：

class LoginController {
  constructor() {
    this.eventBus = new EventBus()
    this.init()
  }

  init() {
    this.eventBus.on('login', this.login.bind(this))
  }

  login(username, password) {
    console.log(`登录成功：${username}:${password}`)
  }

  doLogin(username, password) {
    this.eventBus.emit('login', username, password)
  }
}

在上面的示例中，我们首先定义了一个 LoginController 类，它维护了一个 EventBus 对象，以便订阅和触发事件。在 init 方法中，我们为 login 事件添加订阅者，它指向 login 方法。login 方法是具体的处理函数，它接收用户名和密码，然后打印出登录成功的信息。最后，我们定义了一个 doLogin 方法，它用于模拟用户登录，并触发 login 事件。

示例2

假设我们正在开发一个音乐播放器，我们需要添加一个进度条和一个音量条，当进度条或音量条值改变时，我们需要订阅这些事件，并更新音乐播放器的UI。代码实现如下：

class MusicPlayer {
  constructor() {
    this.eventBus = new EventBus()
    this.init()
  }

  init() {
    this.eventBus.on('progress', this.updateProgress.bind(this))
    this.eventBus.on('volume', this.updateVolume.bind(this))
  }

  updateProgress(progress) {
    console.log(`updateProgress: ${progress}`)
  }

  updateVolume(volume) {
    console.log(`updateVolume: ${volume}`)
  }

  setProgress(progress) {
    this.eventBus.emit('progress', progress)
  }

  setVolume(volume) {
    this.eventBus.emit('volume', volume)
  }
}

在上面的示例中，我们首先定义了一个 MusicPlayer 类，它维护了一个 EventBus 对象，以便订阅和触发事件。在 init 方法中，我们为 progress 事件和 volume 事件添加订阅者，分别指向了 updateProgress 方法和 updateVolume 方法。 updateProgress 和 updateVolume 方法是具体的处理函数，它们分别接收进度值和音量值，并打印出更新的信息。最后，我们定义了 setProgress 方法和 setVolume 方法，用于设置进度值和音量值，并触发 progress 事件和 volume 事件。

总结

发布订阅模式是一种非常实用的设计模式，它能够帮助我们解决系统耦合和复杂性的问题。在开发中，只需要定义好订阅事件和处理函数，然后将它们绑定到具体的类和方法中，就可以实现很好的解耦效果。通过上面的示例，我们相信大家已经对发布订阅模式有了一定的了解，希望大家可以在适当的场景中应用到它。