快捷導(dǎo)航

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)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

javascript比較兩個日期相差天數(shù)的方法
這篇文章主要介紹了javascript比較兩個日期相差天數(shù)的方法,涉及javascript針對日期的轉(zhuǎn)換與比較的相關(guān)操作技巧,具有一定參考借鑒價值,需要的朋友可以參考下
2015-07-07
JavaScript中callee和caller的區(qū)別與用法實例分析
這篇文章主要介紹了JavaScript中callee和caller的區(qū)別與用法,結(jié)合實例形式分析了javascript中callee和caller的功能、區(qū)別、用法及操作注意事項,需要的朋友可以參考下
2019-06-06
js模擬百度模糊搜索的實例
下面小編就為大家?guī)硪黄猨s模擬百度模糊搜索的實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-08-08
用javascript實現(xiàn)jquery的document.ready功能的實現(xiàn)代碼
實現(xiàn)jQuery的document.ready功能js代碼
2009-11-11
新手學(xué)習(xí)前端之js模仿淘寶主頁網(wǎng)站
淘寶網(wǎng)大家在熟悉不過了，那么淘寶網(wǎng)首頁模板是怎么做的呢？今天小編抽時間給大家分享新手學(xué)習(xí)前端之js模仿淘寶主頁網(wǎng)站的相關(guān)資料,需要的朋友可以參考下
2016-10-10
javascript中tostring()和valueof()的用法及兩者的區(qū)別
基本上，所有JS數(shù)據(jù)類型都擁有valueOf和toString這兩個方法，null除外。它們倆解決javascript值運算與顯示的問題，本文給大家介紹javascript中tostring()和valueof()的用法及兩者的區(qū)別，對js tostring valueof相關(guān)知識感興趣的朋友一起學(xué)習(xí)吧
2015-11-11
js實現(xiàn)三角形粒子運動
這篇文章主要為大家詳細介紹了js實現(xiàn)三角形粒子運動，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-09-09
PhotoSwipe異步動態(tài)加載圖片方法
這篇文章主要為大家詳細介紹了PhotoSwipe異步動態(tài)加載圖片方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2016-08-08
JS數(shù)據(jù)類型STRING使用實例解析
這篇文章主要介紹了JS數(shù)據(jù)類型STRING使用實例解析,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
2019-12-12
JavaScript實現(xiàn)多重繼承的方法分析
這篇文章主要介紹了JavaScript實現(xiàn)多重繼承的方法,結(jié)合實例形式詳細分析了javascript實現(xiàn)多重繼承的具體步驟與相關(guān)操作技巧,需要的朋友可以參考下
2018-01-01