简介
Web Worker 是 HTML5 中的一个多线程解决方案，可以让 JavaScript 运行在独立的线程中，提高了程序的性能，但是 Web Worker 没有全局变量，也没有 DOM 操作等功能，因此我们需要用 message 机制来进行通信。
web-worker-manager 是一个基于 Web Worker 的常用功能管理包，可以简化我们使用 Web Worker 的过程，提高开发效率。
安装
使用 npm 安装 web-worker-manager ：
npm install web-worker-manager --save
使用
初始化
使用 web-worker-manager 首先需要创建一个 Worker 的实例，代码如下：
import WorkerManager from 'web-worker-manager';
const worker = new WorkerManager({
workerFn: 'worker.js', // worker 文件路径
type: 'classic', // worker 类型，可选值：'classic' / 'module' ，默认为 'classic'
name: 'my-worker', // worker 名称，仅在 type='classic' 时有效
debug: true, // 是否开启调试模式，调试模式下会输出更多信息
});发送消息并接受回复
使用 post 方法可以向 worker 发送消息，并通过 Promise 接收回复，代码如下：
worker.post({ type: 'add', a: 1, b: 2 }).then((result) => {
console.log(`result is ${result}`);
});worker 接收到消息后会处理，并将计算结果通过 postMessage 返回给主线程。
接收到 worker 的消息后，Promise 的 then 回调函数即可接收处理结果。
调用方法
worker 中可能存在很多功能，可以使用 web-worker-manager 提供的 call 方法，调用 worker 中的方法，代码如下：
worker.call('add', [1, 2]).then((result) => {
console.log(`result is ${result}`);
});调用方法时，需要传入方法名以及参数数组，接收方法的返回值即可。
特殊情况处理
对于一些特殊情况，如 worker 内部出现异常或发生错误等，可以通过监听 worker 实例的 onerror 事件，在事件回调中处理错误，代码如下：
worker.onerror = (e) => {
console.error(`worker error: ${e.message}`);
};实例
下面我们来看一个实际的例子：在 worker 中计算数组加和。
worker.js
-- -------------------- ---- -------
-- ------------
-------- -------------- -
------ ---------------- ---- -- --- - --- - ---- ---
-
-- ----
-------------------------------- --- -- -
------------------- --------- ----------------------------
----- - ----- ---- - - -------
------ ------ -
---- ------------ -
----- ------ - ----------------
------------------- ------- ------------
-- ----
------------------ ----- --------- ----- ------ ---
------
-
-------- -
--------------------- ------- ----- ----------
-
-
---main.js
-- -------------------- ---- ------- ------ ------------- ---- --------------------- ----- ------ - --- --------------- --------- ------------ --- ----- --- - --- -- -- -- --- ------------------------ -------------------- -- - ------------------- -- ------------ ---
总结
web-worker-manager 是一个非常实用的 Web Worker 常用功能管理包，可以简化我们使用 Web Worker 的过程，提高开发效率。本文介绍了 npm 包 web-worker-manager 的安装和使用，包括初始化、发送消息、调用方法等。同时，我们通过一个数组加和的例子来演示了实际使用中的情况。希望本文能对前端开发者们有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66215