JavaScript怎么利用发布订阅模式编写事件监听函数

这篇“JavaScript怎么利用发布订阅模式编写事件监听函数”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“JavaScript怎么利用发布订阅模式编写事件监听函数”文章吧。

背景

大家有没有遇到过这种情况，想要写一个事件监听函数，当某个事件被触发的时候，会自动执行这个监听函数，类似：

on('changeText', (data) => {
    console.log(data)
})

这就是典型的发布订阅的一个模式。对于大型项目，你可以使用类似 redux/vuex 这样的响应式状态管理系统，但是如果你不想使用这么重的方案，可以使用 eventHub。

eventHub和发布订阅模式（Pub/Sub）的关系？

发布订阅是一种设计模式，EventHub可以被看作是一种Pub/Sub实现。

示例

class EventHub {
  constructor() {
    this.listeners = {};
  }

  on(eventName, callback) {
    if (!this.listeners[eventName]) {
      this.listeners[eventName] = [];
    }
    this.listeners[eventName].push(callback);
  }

  emit(eventName, data) {
    if (this.listeners[eventName]) {
      this.listeners[eventName].forEach(callback => {
        callback(data);
      });
    }
  }
}

const eventHub = new EventHub();

eventHub.on('hello', (data) => {
  console.log(`Hello ${data}!`);
});

eventHub.emit('hello', 'world');

上述代码定义了一个名为EventHub的类，它有两个方法：

• on方法用于订阅事件

• emit方法用于发布事件。

在实际应用中，我们可能需要更复杂的功能，例如取消订阅事件或限制监听器的数量。

基于Vue的eventHub

vue 原生提供了 $on、$emit 等函数，所以直接就可以这么用，但是好像 vue3 去掉了，可以使用更灵活的 ref、reactive

let eventHub = new Vue()

// 监听
eventHub.$on('eventName', (data) => {
    console.log('Trigger this event and receive ' + data)
})

// 广播
eventHub.$emit('eventName', data)

// 去掉监听
eventHub.$off('eventName')

以上就是关于“JavaScript怎么利用发布订阅模式编写事件监听函数”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注亿速云行业资讯频道。