@giszhc/worker-client：前端Web Worker神器，这才是更优解（附在线示例）

Worker Client一个零配置、类型安全、函数式调用的 Web Worker 通信库让你可以像调用普通函数一样使用 Worker。本库专注于简化 Web Worker 使用体验无需创建单独的 worker 文件自动完成通信封装。✨ 特性零配置 Worker- 无需创建worker.ts函数式调用-worker.xxx()直接调用️类型安全- 完整 TypeScript 推断参数 返回值Promise 支持- 原生 async/await自动通信封装- 无需 postMessagenamespace 隔离- 多实例安全通信⚡高性能- 运行在 Worker 线程不阻塞主线程轻量无依赖在线示例我们提供了一个功能完整的在线演示页面您可以直接在浏览器中体验所有功能 立即体验点击访问在线演示 安装pnpmaddgiszhc/worker-client或npminstallgiszhc/worker-clientyarnaddgiszhc/worker-client 快速开始基础用法推荐import{WorkerClient}fromgiszhc/worker-client;typeWorkerMethods{heavyTask(n:number):number;};constworkernewWorkerClientWorkerMethods({heavyTask(n){functionfib(x:number):number{returnx1?x:fib(x-1)fib(x-2);}returnfib(n);}});constresultawaitworker.heavyTask(40);console.log(计算结果:,result); 使用方式✅ 函数式调用核心特性constresultawaitworker.heavyTask(40); 等价于worker.call(heavyTask,40);但更推荐前者类型更安全、更优雅✅ 多方法定义typeWorkerMethods{add(a:number,b:number):number;greet(name:string):string;};constworkernewWorkerClientWorkerMethods({add(a,b){returnab;},greet(name){returnHello${name};}});awaitworker.add(1,2);// numberawaitworker.greet(张三);// string✅ 获取 namespace调试用console.log(worker.getKey());✅ 显式 namespace高级用法constworkernewWorkerClient({task(n:number){returnn*2;}},{namespace:my-worker:v1});✅ 销毁 Workerworker.destroy(); API 文档构造函数newWorkerClient(methods,options?)参数说明参数类型必填说明methodsRecordstring, Function✅ 是Worker 内执行的方法optionsWorkerClientOptions❌ 否配置项WorkerClientOptionsinterfaceWorkerClientOptions{namespace?:string;timeout?:number;}参数说明参数类型必填默认值说明namespacestring❌ 否自动生成命名空间用于隔离不同 Worker 实例timeoutnumber❌ 否5000超时时间毫秒Worker 方法调用超过此时间将抛出错误 timeout 使用示例// 设置 3 秒超时constworkernewWorkerClient({heavyTask(n:number){functionfib(x:number):number{returnx1?x:fib(x-1)fib(x-2);}returnfib(n);}},{timeout:3000// 3 秒后超时});try{constresultawaitworker.heavyTask(50);console.log(计算结果:,result);}catch(error){if(error.message.includes(timeout)){console.error(⏱️ 计算超时任务耗时过长);}else{console.error(❌ 其他错误:,error);}}注意超时后会抛出错误建议配合try-catch使用实例方法worker.xxx(…args)调用 Worker 方法推荐constresawaitworker.heavyTask(40);call(method, …args)底层调用方式constresawaitworker.call(heavyTask,40);getKey()获取当前 namespaceconstkeyworker.getKey();destroy()销毁 Workerworker.destroy(); 进阶示例CPU 密集型任务constworkernewWorkerClient({fibonacci(n:number){functionfib(x:number):number{returnx1?x:fib(x-1)fib(x-2);}returnfib(n);}});awaitworker.fibonacci(45); 不会阻塞 UI批量调用constresultsawaitPromise.all([worker.heavyTask(35),worker.heavyTask(36),worker.heavyTask(37)]);数据处理constworkernewWorkerClient({process(data:number[]){returndata.map(xx*2);}});constresultawaitworker.process([1,2,3]);⚠️ 注意事项1️⃣ 方法会被字符串化methods:{task(){returnexternalVar;// ❌ 无法访问}} 原因函数通过toString()注入 Worker2️⃣ 不支持外部依赖importaxiosfromaxios;❌ Worker 内无法访问3️⃣ 不支持 DOMdocument.querySelector()❌ Worker 无 DOM4️⃣ 方法命名冲突避免{destroy()❌}5️⃣ 数据必须可结构化克隆支持✅ Object / Array✅ Number / String✅ ArrayBuffer / TypedArray不支持❌ Function❌ DOM❌ Class instance 设计理念为什么不用原生 Workerworker.postMessage(...)worker.onmessage... 存在问题❌ 使用复杂❌ 无类型❌ 无 request/response❌ 难维护WorkerClient 的解决方案awaitworker.task(data); 本质 Worker RPC远程函数调用 与其他通信库的关系库作用iframe-client跨页面通信socket-client网络通信worker-client多线程通信 可以统一为client.call(...) 适用场景大数据计算图像处理JSON 解析加密/解密CPU 密集型任务❓ 常见问题 (FAQ)Q: 为什么不用 worker.tsA: 本库使用Blob Worker自动生成无需额外文件。Q: 有类型提示吗A: 有完整支持参数类型推断返回值推断Q: 可以用 async 吗asynctask(){return123;} ✅ 完全支持Q: 如何调试console.log(worker.getKey());Q: 支持多个 Worker 吗 ✅ 支持每个实例独立 LicenseMIT❤️ 总结WorkerClient 的核心价值让 Web Worker 从“难用 API”变成“函数调用工具”如果这篇文章对你有帮助欢迎点赞 收藏 ⭐ 关注 完结撒花✿✿ヽ(°▽°)ノ✿