javascript - #onmessage 和#postmessage 如何在主线程和 HTML5 的网络 worker 之间进行通信？

Question

我正在从 here 学习 HTML5 worker，作者使用 self.onmessage 和 self.postmessage 在主线程和 worker 之间进行通信“因为worker 无法访问 DOM。”但在下面似乎 self 指的是主线程和 worker。

function CalculatePi(loop)
{
    var c = parseInt(loop);
    var f = parseFloat(loop);
    var n=1;

    //these errors will need more work…
    if (isNaN(c) || f != c ) {
      throw("errInvalidNumber");
    } else if (c<=0) {
      throw("errNegativeNumber");
    }

    for (var i=0,Pi=0;i<=c;i++) {
      Pi=Pi+(4/n)-(4/(n+2));
      n=n+4;
    }
    self.postMessage({'PiValue': Pi});
}
//wait for the start 'CalculatePi' message
//e is the event and e.data contains the JSON object
self.onmessage = function(e) {
  CalculatePi(e.data.value);
}

上面的代码来自一个单独的包含worker的js文件，我理解self.onmessage中的self指的是worker从主线程开始计算，但为什么它会使用 self.postMessage 向自己发送消息？ #postMessage 和#onmessage 的默认回执是否包括主线程和工作线程？

后面作者贴出了通过这个函数计算圆周率的方法:

worker.onmessage = function(e) {
  document.getElementById("PiValue").innerHTML = e.data.PiValue;
};

当工作人员无权访问 DOM 时，这是如何工作的？它显然在这里使用了 document.getElementById。

Answer 1

在您的文件 worker.js 中，将 self.postMessage 视为工作人员(自己)应该发布消息的命令/指令。因为它只能与创建它的 mainJS 通信，所以这条消息就在那里。 :)同样在您的 mainJS 中，worker.onmessage 应该被理解为“消息来自 worker ”的事件。

所以基本上您在两个脚本中都有两个选项:在 mainJS 中:worker.postMessage("message"); 向工作人员发送消息 - 和 worker.onmessage = function(event){...} 收听来自 worker 的消息

在 worker 脚本中:(self or) this.onmessage = function(event){...} 用于监听来自 mainJS 的消息 - 和 self.postMessage("message"); 将一些东西发送回 mainJS