自定义全局 javascript 事件调度程序

Question

我正在尝试创建自定义事件调度程序。我已阅读 this 文章并实现了代码

export default class Dispatcher{
    constructor(){

    }

    addListener (event, callback) {
        // Check if the callback is not a function
        if (typeof callback !== 'function') {
            console.error(`The listener callback must be a function, the given type is ${typeof callback}`);
            return false;
        }
        // Check if the event is not a string
        if (typeof event !== 'string') {
            console.error(`The event name must be a string, the given type is ${typeof event}`);
            return false;
        }
            
        // Create the event if not exists
        if (this.events[event] === undefined) {
            this.events[event] = {
                listeners: []
            }
        }
            
        this.events[event].listeners.push(callback);
    }

    removeListener(event, callback){
        //check if this event not exists
        if(this.events[event] === undefined){
            console.error(`This event: ${event} does not exist`);
            return false;
        }

        this.events[event].listeners = this.events[event].listeners.filter(listener => {
            return listener.toString() !== callback.toString();
        })
    }

    dispatch(event, details){
        //check if this event not exists
        if(this.events[event] === undefined){
            console.error(`This event: ${event} does not exist`);
            return false;
        }

        this.events[event].listeners.forEach((listener) => {
            listener(details);
        })
    }
}

我的目标是让我导入主 JavaScript 文件的外部 classes 能够全局调度事件。所以我希望我的 js 像这样导入

import {API2} from '/js/API2.js'

能够调度可以从最初导入 API2 class.

的 main.js 文件捕获的事件

我尝试过的一种方法是将导入的调度程序 class 附加到 window 但这显然是错误的并且不会产生任何结果。

如何实现一个调度程序 class 允许我从导入或不导入的代码中的任何地方全局添加事件和调度事件？

Answer 1

如果我没理解错的话，你想要两样东西：

将调度程序导入文件并直接使用class
使用全局对象与 class

1。导入文件直接使用

为了直接导入并使用它，创建一个singleton（所以class的1个实例）并直接导出它：

class Dispatcher{
   ...
}

export default new Dispatcher() // this will initialise the singleton instantly

为了使用它，您现在可以在任何文件中导入它：

 import dispatcher from './dispatcher.js';

在任何地方都是同一个实例。

2。使其成为全球

为了使其成为全局文件，您实际上可以使用以下内容更新文件（global for nodejs 或 window for web）：

class Dispatcher{
   ...
}

const dispatcherSingleton = new Dispatcher();

window.dispatcherSingleton = dispatcherSingleton // web
global.dispatcherSingleton = dispatcherSingleton // nodejs

export default dispatcherSingleton // export the singleton

自定义全局 javascript 事件调度程序

Custom global javascript event dispatcher

javascript

global

dispatch

1。导入文件直接使用

2。使其成为全球