Question

美好的一天。有一个带有连接脚本的html页面，从中可以访问某个对象（例如object）。在index.js文件中，我可以访问该对象。有一个函数使用object并从中返回一些数据：

const getObject = () => {
  let data = object.data;
  return data;
}

如果我在index.js中调用此函数，它将正常工作，并且可以访问object。另外，还有一个服务人员已连接到html页面。这段代码：

self.addEventListner('message', event => {
   console.log('message' + event.data);
   importScripts('index.js');
   let data = getObject();
   console.log(data);
}

当我在服务人员内部致电getObject时，出现错误：Uncaught ReferenceError: object is not defined at self.addEventListener (sw.js:33)。有一个问题：服务人员内部如何访问object？

Answer 1

服务工作者和您的受控页面生活在两个完全不同的范围中，它们具有自己的符号集。不可能在这两个范围内直接引用类似getObject()的函数。

但是，可以使用一个在两个作用域之间创建代理的帮助程序库，并基本上“伪造”一个本地接口，该接口实际上将调用远程方法并将结果异步传递回去。

有一些这样的库。我知道最适合服务人员通信的一种方法是Comlink。

这是一个例子，是从Comlink的自述文件中借来的：

// main.js
const MyClass = Comlink.proxy(new Worker('worker.js'));
// `instance` is an instance of `MyClass` that lives in the worker!
const instance = await new MyClass();
await instance.logSomething(); // logs “myValue = 42”

// worker.js
const myValue = 42;
class MyClass {
  logSomething() {
    console.log(`myValue = ${myValue}`);
  }
}
Comlink.expose(MyClass, self);

访问服务工作者中的对象

1 个答案: