为什么Web Worker在模块导入时再次创建一个新的类实例？

问题描述

我们正在对网络工作者执行耗时功能。另外，我还有一个Dispatcher类，该类为其他类创建一个实例以供使用，如下所示：

class Dispatcher {
constructor() {
        console.log("calling");
        this.events = {};
    }
//some code
}
const dispatcher = new Dispatcher();
export default dispatcher;

我已将此模块导入到顶部名为DataManager Class的另一个文件中：

import dispatcher from '../../utility/dispatcher';

export class DataManager {
  notifyRenderer = (data: ResultData): void => {
        dispatcher.dispatch(NOTIFY_EVENT,data);
  }
}

并且我的网络工作者正在创建此类的新实例，并从此处触发用DataManager Class编写的notifyRenderer方法。

import { DataManager } from "./data-manager";
let dm: DataManager;

addEventListener('message',(e) => {
    if (!dm) {
        dm = new DataManager();
    }

    const res = dm.addOrUpdateData(e.data.input,true);
    dm.notifyRenderer(res);
    postMessage({ type: 'Dispatch',res });
},false);

我还要附加控制台的屏幕快照，其中显示console.log（“ calling”）;两次。我不知道为什么Dispatch类构造函数被调用两次。

我在做任何错误吗？在这方面需要帮助。

我觉得模块导入可能是问题所在。是吗？

添加来自工作程序的屏幕快照跟踪：

先谢谢您！

解决方法

每个人都从那里学习到错误和实践，这里也发生了同样的事情。

在我的模块中，一切都是正确的，要么是Dispatcher类，要么是Data Manager类，然后实例化一个新的工作线程。问题是我在该模块的末尾创建了一个Dispatcher Class实例，因为我认为生成的导出将被缓存（根据mjs（require）文件缓存机制），并试图在两个主线程中使用（import）和工作线程，两个线程都创建了自己的模块实例版本。（我的错误！）

直到bergi给我一个提示，我才意识到。正确的方法是使用postmessage将数据从工作线程发送到主线程并侦听主线程。

从辅助线程发送：

postMessage(dm.addOrUpdateData(e.data.input,true) as ResultData);

在主线程上收听：

this.worker.onmessage = (e: MessageEvent) => {
            if (!e.data) return;
            dispatcher.dispatch(NOTIFY_EVENT,e.data);
        };

了解更多有关领域的知识，并且必须访问帮助链接：

• How to understand JS realms

• ES6 import duplicates?

谢谢！