javascript - 为什么 Web 工作者在模块导入时再次创建一个新的类实例？

问题描述

我们正在 web worker 上执行一个计时功能。我还有一个 Dispatcher 类，它为其他类创建单个实例以供使用，如下所示：

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

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

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

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

我的网络工作者正在创建这个类的一个新实例，从这里我们触发一个用 DataManager 类编写的 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 类构造函数被调用两次。

我做错了什么吗。请在这方面需要帮助。

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

从工人添加屏幕截图跟踪：

先感谢您！

标签： javascriptclasseventsweb-worker

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

我的模块中的一切都是正确的，它是调度程序类、数据管理器类并实例化一个新的工作线程。问题是我在该模块的末尾创建了 Dispatcher Class 的单个实例，因为我认为结果导出将被缓存（根据 mjs(require) 文件缓存机制）并尝试在两个主线程中使用（导入）和工作线程，并且两个线程都在那里创建自己的模块实例版本。（我的错误！）

我什至没有意识到，直到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);
        };

了解更多关于领域和帮助的链接必须访问：

谢谢！

javascript - 为什么 Web 工作者在模块导入时再次创建一个新的类实例？

问题描述

解决方案

推荐阅读