自定义全局 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 文件中的外部类能够在全局范围内调度事件。所以我希望我的 js 像这样导入

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

能够调度可以从最初导入 API2 类的 main.js 文件中捕获的事件。

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

如何实现一个调度程序类，允许我从导入的代码中的任何位置全局添加事件和调度事件？

Answer 1

如果我理解正确，你想要两件事：

1. 将dispatcher导入文件，直接使用类
2. 使用全局对象与类交互

1。导入文件直接使用

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

class Dispatcher{
   ...
}

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

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

 import dispatcher from './dispatcher.js';

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

2。使其全球化

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

class Dispatcher{
   ...
}

const dispatcherSingleton = new Dispatcher();

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

export default dispatcherSingleton // export the singleton