在前端开发中，web workers 是非常重要的概念。它们允许我们将脚本运行在后台线程中，从而减少主线程的工作量和提高页面性能。在 NativeScript 开发中，我们可以使用 npm 包 nativescript-webworkers 来实现 web workers 的功能。
本篇文章将为您介绍如何使用 nativescript-webworkers，并给出具体的实例代码供您参考。
简介
NativeScript 的 web workers 在 iOS 和 Android 中都有良好的支持，可以使您的代码在运行时非常高效。nativescript-webworkers 是一个在 NativeScript 应用程序中使用 web workers 的纯 JavaScript 解决方案。
安装与使用
安装 nativescript-webworkers 可以使用 npm 命令：
npm install --save nativescript-webworkers
在使用 nativescript-webworkers 前，需要导入其核心模块：
import { WorkerService } from "nativescript-webworkers";创建 WorkerService 实例时，我们需要提供一个 worker 代码的函数。例如，我们可以使用下面的函数来创建 worker：
function workerFunction() {
// worker app logic goes here.
self.onmessage = function(msg) {
self.postMessage("worker replied: " + msg);
};
}WorkerService 实例可以使用下面的代码来创建：
const workerService = new WorkerService(workerFunction);
可以看到，我们将 workerFunction 函数传递给了 WorkerService 构造函数。这样，我们就可以运行 web worker 并发送消息：
workerService.postMessage({ message: "hello from main app!" });
workerService.onmessage = function(msg) {
console.log(msg.data);
};在 worker 中，也可以通过接收来自主应用程序的消息来向主应用程序发送消息：
self.onmessage = function(msg) {
self.postMessage("worker replied: " + msg);
};实例
下面的示例演示了如何使用 nativescript-webworkers 来实现显示 progress bar 的功能。首先，在主应用程序中对 progress bar 进行初始化：
-- -------------------- ---- -------
------ - ----------- - ---- ---------------------
------ - ------------- - ---- --------------------------
----- -------- - --- --------------
------------------- - ----------
----- ------------- - --- -----------------------------------
--------------------------- -------- ------- ---
----------------------- - ----- -- -
-- --------- --- ------ -
------------------- - ---------
- ---- -
-------------- - ---------
-
--
-------- ------------------- -
-------- ---------------- -
--- - - --
-------------- -- -
-- -- --- ---- -
------------------------
-------------
- ---- -
----------------------
-
-- ----
-
------ ---------------
-此代码片段创建了一个可见的 progress bar，并创建了一个 WorkerService 实例来处理进度更新事件。在实际运行时，worker 中的定时器将每 50ms 自动更新进度。
总结
本篇文章介绍了如何使用 npm 包 nativescript-webworkers 来实现 web workers 的功能。通过创建 WorkerService 实例，我们可以毫不费力地启动 worker，从而减少主线程的工作量并增加应用程序的性能。
希望这篇文章可以帮助您更好地掌握 nativescript-webworkers 的使用方法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600672663660cf7123b364e3