JavaScript怎么利用發(fā)布訂閱模式編寫(xiě)事件監(jiān)聽(tīng)函數(shù)

這篇“JavaScript怎么利用發(fā)布訂閱模式編寫(xiě)事件監(jiān)聽(tīng)函數(shù)”文章的知識(shí)點(diǎn)大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細(xì)，步驟清晰，具有一定的借鑒價(jià)值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來(lái)看看這篇“JavaScript怎么利用發(fā)布訂閱模式編寫(xiě)事件監(jiān)聽(tīng)函數(shù)”文章吧。

背景

大家有沒(méi)有遇到過(guò)這種情況，想要寫(xiě)一個(gè)事件監(jiān)聽(tīng)函數(shù)，當(dāng)某個(gè)事件被觸發(fā)的時(shí)候，會(huì)自動(dòng)執(zhí)行這個(gè)監(jiān)聽(tīng)函數(shù)，類(lèi)似：

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

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

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

發(fā)布訂閱是一種設(shè)計(jì)模式，EventHub可以被看作是一種Pub/Sub實(shí)現(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');

上述代碼定義了一個(gè)名為EventHub的類(lèi)，它有兩個(gè)方法：

• on方法用于訂閱事件

• emit方法用于發(fā)布事件。

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

基于Vue的eventHub

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

let eventHub = new Vue()

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

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

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

以上就是關(guān)于“JavaScript怎么利用發(fā)布訂閱模式編寫(xiě)事件監(jiān)聽(tīng)函數(shù)”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對(duì)大家有幫助，若想了解更多相關(guān)的知識(shí)內(nèi)容，請(qǐng)關(guān)注億速云行業(yè)資訊頻道。