有沒有辦法在webworker中加載一個類而不僅僅是普通的javascript文件？

Question

我想在webworker中加載一個文件，但它不是一個普通的javascript文件。 這是一堂課。 所以，而不是在新的Worker（filename.js）中編寫javascript文件url;

我正在通過編寫new Worker（new ClassName（））來初始化類;

它正在讀取文件並正確加載它。 它甚至在構造函數中顯示console.log消息。 但是當控件移動到主文件中的postMessage方法時，它會拋出錯誤。

我正在處理的應用程序具有非常復雜的結構。 我們有一個通用模塊，它包含幾個在整個應用程序中執行一些常用功能的類。 如果我直接在應用程序中執行它，我正在處理的功能可能會導致性能問題。 所以，我將它加載到webworker中。 因為它是一個類所以我必須使用new關鍵字調用它。 所以代替：

var ww = new Worker(filename.js);

我正在寫：

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

現在，它調用類，它控制台記錄在構造函數中編寫的語句，但是當它在主文件中執行postMessage時，javascript會拋出錯誤並停止執行該方法。

請參閱以下代碼：

mainFile.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（未找到）

任何形式的幫助都非常感謝。

Answer 1

出錯的原因是Worker期望將URL字符串作為其第一個參數，而不是對象。 所以它將它轉換為一個字符串，當你在大多數對象上執行此操作時，你得到"[object Object]" （雖然我希望你的代碼中有"[object CommonWebWorker]" ，但我認為你正在使用一個轉換器或者輸出ES5代碼的東西，它會給你"[object Object]"代替。

您的主頁和您的工作是完全不同的JavaScript環境。 如果需要，你當然可以在你的worker中使用一個類，但是你需要在worker中實例化它，例如：

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

您的工作人員也可以通過importScripts從另一個JavaScript文件導入class （不久之后它將能夠使用ES2015 +模塊語法），因此如果您想在多個工作程序中使用相同的類，您可以將它放在自己的文件和做：

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

一旦ES2015 +語法在workers¹中廣泛使用，你就可以使用相關模塊標志（ new Worker("worker.js", {type: "module"}) ）啟動你的worker，並改為：

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

---

¹我在一個月前左右檢查過，唯一支持它的瀏覽器是Chrome背后的--enable-experimental-web-platform-features標志。 但這個東西變化很快...... :-)