javascript - 有什么办法可以在 webworker 中加载一个类，而不仅仅是普通的 javascript 文件？

Question

我想在 webworker 中加载一个文件，但它不是一个普通的 javascript 文件。这是一个类。所以，而不是写 javascript 文件 url 新 worker (文件名.js)；

我正在通过写作来初始化类(class) 新 worker (新类名())；

它正在读取文件并正确加载它。它甚至在构造函数中显示 console.log 消息。但是当控件移动到主文件中的 postMessage 方法时，它会抛出错误。

我正在处理的应用程序具有非常复杂的结构。我们有一个通用模块，其中包含几个类，这些类在整个应用程序中执行一些通用功能。如果我直接在应用程序中执行我正在处理的功能，可能会导致性能问题。所以，我将它加载到网络 worker 中。由于它是一个类，所以我必须使用 new 关键字调用它。所以不是:

var ww = new Worker(filename.js);

我在写:

var ww = new Worker(new ClassName());

现在，它调用该类，它在控制台记录构造函数中编写的语句，但是当它在主文件中执行 postMessage 时，javascript 抛出错误并停止执行该方法。

请看下面的代码:

主文件.js

    var ww = new Worker(new CommonWebWorker());
        ww.postMessage('LOAD');
        ww.onmessage = function (e) {
            console.log(e.data);
    }

CommonWebWorker.js

'use strict';

class CommonWebWorker {
    constructor() {
        console.log("commonWebWorker invoked");
        this.onmessage = function (e) {
            this.postMessage((e.data === 'LOAD' ? 'Loading...' : 'Loading Error'));
        }
    }
}

module.exports = CommonWebWorker;

我希望该文件将通过 WebWorker 在后台加载，但实际上它正在中断并抛出下面提到的错误

获取 http://localhost:3000/[object%20Object] 404(未找到)

非常感谢任何形式的帮助。

Answer 1

错误的原因是 Worker 需要一个 URL 字符串作为它的第一个参数，而不是一个对象。所以它将它转换为一个字符串，当你在大多数对象上这样做时你会得到 "[object Object]"来自你的代码，但我假设你正在使用一个转译器或输出 ES5 代码的东西，它会给你 "[object Object]" 代替)。

您的主页和您的工作是完全不同的 JavaScript 环境。如果你愿意，你当然可以在你的工作人员中使用一个类，但你需要在工作人员中实例化它，例如:

class CommonWebWorker {
 // ...
}
new CommonWebWorker(); // To instantiate it

您的工作人员还可以通过 importScripts 从另一个 JavaScript 文件导入 class (不久之后它将能够使用 ES2015+ 模块语法来代替)，所以如果你想在多个 worker 中使用同一个类，你可以将它放在自己的文件中并执行:

importScripts("common-web-worker.js");
new CommonWebWorker(); // To instantiate it

一旦 ES2015+ 语法在 workers 中广泛可用¹，您将使用相关模块标志启动您的 worker (new Worker("worker.js", {type: "module"}))，而是这样做:

import CommonWebWorker from "./common-web-worker.js";
new CommonWebWorker();

---

¹ 我大约一个月前检查过，唯一支持它的浏览器是 --enable-experimental-web-platform-features 标志后面的 Chrome。但是这些东西变化很快... :-)