JavaScript

Question

我正在尝试创建一个 JavaScript worker，我需要 JSONfn 库。我不太确定如何导入它？

<html>
    <script type="text/javascript" src="jsonfn.js"></script>

    <script id="worker" type="javascript/worker">
        self.onmessage = function f(message){
              console.log(JSONfn.parse(message...)
        }
    ...
    </script>
<html>

我收到以下错误：

Uncaught ReferenceError: JSONfn is not defined

Answer 1

您应该使用像 UNPKG 这样的 CDN 来导入您的脚本，或者在您的网站目录中本地托管它们。

CDN 使用

<script src="https://unpkg.com/json-fn" type="text/javascript"></script>

本地托管

从 github 下载 jsonfn.js 并将其放在您托管网站的目录中。

<script src="jsonfn.js" type="text/javascript">

Answer 2

要在 Web Worker 中导入外部脚本，您可以使用 non-module Worker 上下文中可用的 importScripts() 方法。

但是，这个特定的库似乎并不适合在 Worker 中使用（它调用 window getter，这在 Worker 上下文中不可用）。似乎只需将 window 重定向到 self 就可以解决问题，但在其他地方很可能会失败。

此外，要从主线程返回解析，您显然必须在该上下文中再次加载库（通过 <script>）。

const worker_url = URL.createObjectURL(new Blob([document.querySelector("[type=worker]").textContent], {type: "text/javascript"}));
const worker = new Worker(worker_url);
worker.onmessage = (evt) => {
  console.log("received", evt.data);
  const parsed = JSONfn.parse(evt.data);
  console.log(parsed)
  console.log(parsed.baz());
};

<script type="worker">
window = self; // jsonfn uses "window"
importScripts("https://cdn.jsdelivr.net/gh/vkiryukhin/jsonfn/jsonfn.js");
const obj = {foo: "bar", baz: function() { return "blah"; }}
const json = JSONfn.stringify(obj);
postMessage(json);
</script>
<!-- to parse from the main thread we need to load the library here too -->
<script src="https://cdn.jsdelivr.net/gh/vkiryukhin/jsonfn/jsonfn.js"></script>

另请注意，此库要求您使用 function 关键字声明您的函数（不支持箭头函数或方法语法），并且它将无法检索外部的任何内容函数的范围，它实际上只是复制源代码，与上下文无关。

JavaScript - 找不到导入的文件

JavaScript - cannot find imported file

web-worker