JavaScript利用發(fā)布訂閱模式編寫事件監(jiān)聽函數(shù)

更新時間：2023年04月12日 10:08:52 作者：Lvan的前端筆記

發(fā)布訂閱是一種設(shè)計模式，EventHub可以被看作是一種Pub/Sub實現(xiàn)。本文就來講講如何利用eventHub發(fā)布訂閱寫一個事件監(jiān)聽函數(shù)，感興趣的可以了解一下

背景

大家有沒有遇到過這種情況，想要寫一個事件監(jiān)聽函數(shù)，當(dāng)某個事件被觸發(fā)的時候，會自動執(zhí)行這個監(jiān)聽函數(shù)，類似：

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

這就是典型的發(fā)布訂閱的一個模式。對于大型項目，你可以使用類似 redux/vuex 這樣的響應(yīng)式狀態(tài)管理系統(tǒng)，但是如果你不想使用這么重的方案，可以使用 eventHub。

eventHub和發(fā)布訂閱模式（Pub/Sub）的關(guān)系？

發(fā)布訂閱是一種設(shè)計模式，EventHub可以被看作是一種Pub/Sub實現(xiàn)。

示例

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方法用于發(fā)布事件。

在實際應(yīng)用中，我們可能需要更復(fù)雜的功能，例如取消訂閱事件或限制監(jiān)聽器的數(shù)量。

基于Vue的eventHub

vue 原生提供了 $on、$emit 等函數(shù)，所以直接就可以這么用，但是好像 vue3 去掉了，可以使用更靈活的 ref、reactive

let eventHub = new Vue()

// 監(jiān)聽
eventHub.$on('eventName', (data) => {
    console.log('Trigger this event and receive ' + data)
})

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

// 去掉監(jiān)聽
eventHub.$off('eventName')

到此這篇關(guān)于JavaScript利用發(fā)布訂閱模式編寫事件監(jiān)聽函數(shù)的文章就介紹到這了,更多相關(guān)JavaScript事件監(jiān)聽內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: