时间戳

首页 > 解决方案 > 有什么方法可以在 webworker 中加载一个类，而不仅仅是普通的 javascript 文件？

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

问题描述

我想在 webworker 中加载一个文件，但它不是一个普通的 javascript 文件。这是一个类。因此，不要在 new Worker(filename.js) 中编写 javascript 文件 url；

我正在通过编写 new Worker(new ClassName()); 来初始化类。

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

我正在处理的应用程序具有非常复杂的结构。我们有一个公共模块，其中包含几个类，这些类在整个应用程序中执行一些公共功能。如果我直接在应用程序中执行它，我正在处理的功能可能会导致性能问题。所以，我将它加载到网络工作者中。由于它是一个类，所以我必须使用 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 在后台加载，但实际上它正在破坏并抛出下面提到的错误

GET http://localhost:3000/[object%20Object] 404（未找到）

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

标签： javascriptclassweb-worker

解决方案

错误的原因是Worker需要一个 URL 字符串作为它的第一个参数，而不是一个对象。所以它将它转换为一个字符串，当你对你得到的大多数对象执行此操作时"[object Object]"（虽然我会"[object CommonWebWorker]"从你的代码中得到预期，但我假设你正在使用转译器或输出 ES5 代码的东西，这会给你"[object Object]"代替）。

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

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

class您的工作人员也可以通过从另一个 JavaScript 文件导入importScripts（不久之后它将能够使用 ES2015+ 模块语法），因此如果您想在多个工作人员中使用同一个类，您可以将它放在自己的文件中并做：

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

一旦 ES2015+ 语法在 worker 中广泛可用¹，您将使用相关的模块标志 ( new Worker("worker.js", {type: "module"})) 启动您的 worker，并改为执行以下操作：

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

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

推荐阅读