陈帅华的个人网站 - 探索技术艺术与国学之美

Web Workers API 学习指南

全篇共 1971 字。按500字/分钟阅读,预计用时 3.9 分钟。

善用类比法学习 Web Workers API,看透它们的共性,并找出它们各自的特性。学习任何新东西,都是在我们过去已知的经验之上。这种经验就有好处也有不好之处。从已有规则中学习,但又不被既定规则羁绊,才是好。凤凰浴火燃烧,从灰烬中涅槃重生。从灰烬中来,从淤泥中来,不受困于灰烬和淤泥。

克隆源代码

本篇学习指南中的源代码片段都能在 web-workers-api 仓库 中找到。把代码仓库克隆到本地。在项目根目录下执行安装依赖的 npm 命令。

npm clone https://github.com/airglass/web-workers-api.git
cd web-workers-api
npm install

本地web服务

如果直接在浏览器中打开项目中的 www/index.html 文件,控制台会报 DOMException 异常错误。这是因为 WorkerXMLHttpRequest 一样,都要运行在 web 服务中,而不能直接从文件系统中打开。

lite-server 是快速启动 web 服务的命令行工具。它运行在 node 环境中的。它自动启动浏览器,并监听目录下的 web 内容是否修改,自动刷新页面。它轻量小巧易上手,专为单页面应用而生。它会自动读取根目录下的配置文件 bs-config.json。如果配置文件不存在,它会使用默认配置。你可以修改配置文件中的参数。比如修改 web 服务的监听端口。

{
  "port": 8000,
  "files": [ "./www/**/*.{html,htm,css,js}" ],
  "server": {
    "baseDir": "./www"
  }
}

在根目录下执行 npm start,就能启动 web 服务了。根据配置文件的设定,它为 www 目录下的文件提供静态文件服务。它还监听 www 目录下的 html、htm、css 和 js 类型文件是否发生修改。它借助 webSocket 技术实现网页的即时刷新。

Worker API

学习新东西,善用类比法,快速拉近心理距离。看透它们的共性,并找出它们各自的特性。就像发起 Ajax 请求使用 XMLHttpRequest 构造函数,启动在另一个线程运行的脚本就用 Worker 构造函数。这就是它们用法的共性。接下来从传入的参数,和创建的实例所拥有的方法和属性找到各自的特性。

const myWorker = new Worker('worker.js');

www/main.js 脚本内,用 Worker 构造 Worker 实例。传入在另一线程运行的脚本的地址作为构造函数的第一个参数,该脚本的地址须遵守通源策略。建议使用相对路径,相对于当前网址。

worker.js 中的脚本就像被包裹在一个函数中。这个函数在另一个线程被立即执行了。这个函数内的 this 指向 DedicatedWorkerGlobalScope 构造函数的一个实例。这个实例有很多属性和方法。其中最有用的两个属性是 postMessage 方法和 onmessage 属性。在使用这两个属性时,你可以从 this 中用“点”运算符查询、赋值的方式,也可以像使用已经声明好的变量那样使用。

this.onmessage = e => {
  console.log(e.data); // '1'
  this.postMessage('收到');
}

www/main.js 脚本内和 www/worker.js 通信的方式,也是通过 postMessage 方法和 onmessage 属性。和 www/worker.js 不同的是,必须通过实例来调用方法,查询和赋值属性。

myWorker.postMessage('1');
myWorker.onmessage = e => {
  console.log(e.data); // '收到'
};

Woeker - Web API 接口参考 | MDN 有详尽的接口使用方法。比如捕获异常、立即终止等接口。