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怎么利用发布订阅模式编写事件监听函数”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注编程网精选频道。