Web Workers Part 2: 通信

这是Web Workers系列文章的第二部分，还没了解Web Workers的同学可以先查看Part 1

你可能会需要查阅这些接口：Worker、DedicatedWorkerGlobalScope

为什么需要域（线程）间的通信

上一篇文章里我们学会了创建一个Worker，并让js代码在一个独立的域（及线程）里运行；但你会发现：

• js代码里不能使用window
• js代码里不能使用document（其实就是window下的所有属性都不能找到）

这是因为你的js代码运行在一个叫DedicatedWorkerGlobalScope的作用域里，这与页面所处在的window域是隔离的，谁都不能查找到对方。
但这并不意味着两个域之间就不能传递信息，毕竟worker域归根到底也是为window域服务。

如何进行通信

如上面所说，window域与worker域是隔离的：

                                       
                     #         
    Window Scope     #     Dedicated Worker Global Scope
                     #

但存在一个中间者，无论是window域或worker域都能向这个中间者发送消息；这个中间者就是一开始在window域下面创建的Worker实例：

                    Worker
                   /       \
                 /           \
               /     #         \
    Window Scope     #     Dedicated Worker Global Scope
                     #

下面是两者分别向另一个域发送消息的代码：

window域 -> Worker域

// window域，index.html
// worker是之前new Worker创建的实例
worker.postMessage('Winter is coming.')

// worker域，worker.js
self.addEventListener('message', event => {
  // 处理消息
})

window域 <- Worker域

// worker域，worker.js
self.postMessage('Winter is coming.')

// windows域，index.html
// worker是之前new Worker创建的实例
worker.addEventListener('message', event => {
  // 处理消息
})

---

以上就是域间通信的方式。
通过这样，当在worker域里完成复杂任务后你就能告诉页面，让页面做对应处理；或当页面接受到某些指令时，让worker域里开始某些工作。
你现在已经懂得怎么创建独立线程，并让这个线程与页面线程通信；下一部分我们会再具体深入一下DedicatedWorkerGlobalScope这个接口。