简介
Web Worker 是 HTML5 中的一个多线程解决方案，可以让 JavaScript 运行在独立的线程中，提高了程序的性能，但是 Web Worker 没有全局变量，也没有 DOM 操作等功能，因此我们需要用 message 机制来进行通信。
web-worker-manager 是一个基于 Web Worker 的常用功能管理包，可以简化我们使用 Web Worker 的过程，提高开发效率。
安装
使用 npm 安装 web-worker-manager ：
--- ------- ------------------ ------
使用
初始化
使用 web-worker-manager 首先需要创建一个 Worker 的实例，代码如下：
------ ------------- ---- --------------------- ----- ------ - --- --------------- --------- ------------ -- ------ ---- ----- ---------- -- ------ ---------------- - -------- ---- --------- ----- ------------ -- ------ ----- -------------- --- ------ ----- -- --------------------- ---
发送消息并接受回复
使用 post 方法可以向 worker 发送消息，并通过 Promise 接收回复，代码如下：
------------- ----- ------ -- -- -- - ---------------- -- - ------------------- -- ------------ ---
worker 接收到消息后会处理，并将计算结果通过 postMessage 返回给主线程。
接收到 worker 的消息后，Promise 的 then 回调函数即可接收处理结果。
调用方法
worker 中可能存在很多功能，可以使用 web-worker-manager 提供的 call 方法，调用 worker 中的方法，代码如下：
------------------ --- ----------------- -- - ------------------- -- ------------ ---
调用方法时，需要传入方法名以及参数数组，接收方法的返回值即可。
特殊情况处理
对于一些特殊情况，如 worker 内部出现异常或发生错误等，可以通过监听 worker 实例的 onerror 事件，在事件回调中处理错误，代码如下：
-------------- - --- -- - --------------------- ------ --------------- --
实例
下面我们来看一个实际的例子：在 worker 中计算数组加和。
worker.js
-- ------------
-------- -------------- -
------ ---------------- ---- -- --- - --- - ---- ---
-
-- ----
-------------------------------- --- -- -
------------------- --------- ----------------------------
----- - ----- ---- - - -------
------ ------ -
---- ------------ -
----- ------ - ----------------
------------------- ------- ------------
-- ----
------------------ ----- --------- ----- ------ ---
------
-
-------- -
--------------------- ------- ----- ----------
-
-
---main.js
------ ------------- ---- --------------------- ----- ------ - --- --------------- --------- ------------ --- ----- --- - --- -- -- -- --- ------------------------ -------------------- -- - ------------------- -- ------------ ---
总结
web-worker-manager 是一个非常实用的 Web Worker 常用功能管理包，可以简化我们使用 Web Worker 的过程，提高开发效率。本文介绍了 npm 包 web-worker-manager 的安装和使用，包括初始化、发送消息、调用方法等。同时，我们通过一个数组加和的例子来演示了实际使用中的情况。希望本文能对前端开发者们有所帮助。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/66215