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

Question

我们正在网络工作者上执行一个计时功能。我还有一个调度程序类，它创建一个实例供其他类使用，如下所示：

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);
  }
}

我的 Web Worker 正在创建此类的新实例，从这里我们将触发在 DataManager 类中编写的 notificationRenderer 方法。

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 类构造函数被调用两次。

我有什么错误吗？请在这方面需要帮助。

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

添加工作人员的屏幕截图跟踪：

提前谢谢您！

Answer 1

每个人都会通过练习从错误中吸取教训，我这里也发生了同样的事情。

我的模块中的一切都是正确的 - 调度程序类、数据管理器类和新工作线程的实例化。问题是我在该模块的末尾创建了 Dispatcher 类的单个实例，因为我认为生成的导出将被缓存（根据 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);
        };

了解有关领域的更多信息和帮助链接，必须访问：

• 如何理解JS领域

• ES6 导入重复项？

谢谢！