`

WebWorker 语法糖 SugarWorker

 
阅读更多
http://www.oschina.net/p/sugarworker
SugarWorker —— 轻松的使用web多线程技术;

webWorker
var lsitWorker = new Worker('core/listWorker.js');
lsitWorker.onmessage = function(e){     
    if(e.data){
        listWorker.postMessage('new test data');
    }
    ...(response)
    console.log(e);
    lsitWorker.terminate();
};
listWorker.onerror = function(e){
    ...(response)
    console.error(e);
};
listWorker.postMessage('test data');



SugarWorker
work('core/listWorker.js')
    .back(function(e){         
        if(e.data){
            e.post('new test data');
        }
        ...(response)
        console.log(e);
        e.end();
    })
    .err(function(e){
        ...(response)
        console.error(e);
    })
    .post('test data');



SugarWorker还支持事件定义,方便监听另一条线程的状态
work('core/test.js')
    .back(function(e){
        console.log(e);
    })
    .set('loading',function(e){
        console.log('loading');
        console.log(e);
    })
    .post('test data');


//test.js onmessage = function(e){
    postMessage({
        eventType : 'loading',
        data : {...}
        //some datas     
    });
}

通过worker线程返回对象,添加eventType属性,可以在主线程触发定义的事件;

添加eventType的返回数据,不会触发主线程back方法;

更多使用方法请查看:https://github.com/kirakiray/SugarWorker
分享到:
评论

相关推荐

    WebWorker语法糖SugarWorker.zip

    SugarWorker —— 轻松的使用web多线程技术; webWorker var lsitWorker = new Worker('core/listWorker.js'); lsitWorker.onmessage = function(e){   if(e.data){  listWorker.postMessage('new ...

    Web Worker版调用Face-Api.js

    "Web Worker版调用Face-Api.js"是一个解决方案,它利用Web Worker技术来封装并异步执行Face-API.js库,从而避免阻塞主线程,提供高性能的用户体验。以下是关于这个主题的详细知识点: 1. **Web Worker**:Web ...

    HTML5 WebWorker

    Web Worker使得复杂的、计算密集型的任务可以在不阻塞用户界面的情况下运行,显著提升了Web应用的性能体验。下面我们将深入探讨Web Worker的基本概念、工作原理以及如何在实际项目中应用。 一、Web Worker基础 1. ...

    Web Worker用法汇总

    Web Worker的出现就是为了缓解这一问题,它允许开发者创建额外的线程来处理计算密集型或长时间运行的任务,而不影响主线程上的用户交互。 Web Worker的使用主要包括以下几个步骤: 1. **创建Worker**: 使用`new ...

    vue3中使用Web Worker多线程(JS原味版)

    用于《vue3中使用Web Worker多线程》这篇文章的项目Demo下载 文章地址:https://blog.csdn.net/weixin_42063951/article/details/125300644

    将独立函数类移动到webworker的一种非常简单的方法

    在JavaScript开发中,Web Worker是一种可以提升应用性能的技术,它允许我们在后台线程中执行耗时的计算任务,不阻塞用户界面。标题提到的"将独立函数类移动到Web Worker"是解决JavaScript单线程限制的有效手段。下面...

    react-reactworkerimage一个React组件实现通过webworker加载图像

    `react-worker-image`是一个专为解决这个问题而设计的库,它利用Web Worker技术在后台线程中加载图像,从而避免阻塞主线程,提高应用性能。本文将详细介绍这个React组件的工作原理、使用方法及其在图片编辑场景中的...

    前端开源库-web-worker-manager

    Web Worker Manager作为一个开源库,它的主要目标是简化Web Worker的创建、管理和通信流程,提供更高级别的抽象,使得开发者能够更加方便地利用Web Worker的多线程能力。它通常包含以下功能: 1. **Worker实例化和...

    基于各种HTML5新特性、WebSocket、WebWorker实现的视频播放弹幕互动网页.zip

    弹幕功能通常依赖WebSocket实现,用户发送的弹幕信息通过WebSocket实时推送到服务器,然后广播到其他连接的客户端,所有这些都是在WebWorker的辅助下,确保主线程(即用户界面)的流畅运行。 总的来说,这个项目...

    学习threejs,实现配合使用WebWorker,动漫模型

    学习threejs,实现配合使用WebWorker,动漫模型

    在WebWorker中运行一个模块

    Web Worker 是一种在浏览器环境中运行后台脚本的技术,它允许开发者在主线程之外创建独立的线程,处理计算密集型任务,从而不阻塞用户界面。这个“在Web Worker中运行一个模块”的主题,主要是关于如何利用...

    Viajs实现在一个WebWorker中使用DOM

    创建一个新的Web Worker,导入`via.js`库,然后在Worker中,你可以使用`via`对象来执行DOM操作。例如,你可以创建一个新的元素,设置属性,甚至添加事件监听器。所有这些操作都会被转换为消息传递到主线程,由主线程...

    canvas-webworker:可以在WebWorkers中使用的纯JavaScript Canvas实现

    画布WebWorker 可以在WebWorkers中使用的纯JavaScript Canvas实现 当必须执行长脚本而主程序必须保持运行(不能被阻止)时,WebWorkers非常有用。 当必须生成复杂的图像(例如,游戏的纹理较大)时,该生成可能会...

    WebWorkerImgLoading:使用Web Worker加载图像

    网络工作者图加载使用Web Worker加载图像这有什么意义呢?浏览器不是已经在单独的线程中对图像进行解码了吗?浏览器分别对图像进行解码,是的,但是不会分别加载图像。在下载图像时,它们阻塞了UI线程并阻止了其他...

    ng-webworker-helper:在有角度的应用程序中使用Webworker的助手

    ng-webworker-helper 该项目是Angular的扩展,应该可以简化使用WebWorker的工作。 该项目使您可以在单独的线程中运行代码,并使UI更快地运行。安装要使用项目使用 npm install ng-webworker-helper -Snpm install ...

    基于vue3 、web worker的翻牌计时器源码.zip

    Vue3 和 Web Worker 技术在现代Web开发中扮演着重要的角色,特别是在构建高性能、响应式的用户界面方面。本项目“基于vue3 、web worker的翻牌计时器源码.zip”结合了这两个强大的技术,旨在实现一个高效且流畅的...

    worker-module:Web将Web Worker集成到您的Nuxt应用程序中

    您的浓汤Nuxt应用程序中的Web Worker 设置 将@vinayakkulkarni/worker-module依赖项添加到您的项目中 npm install @vinayakkulkarni/worker-module 将@vinayakkulkarni/worker-module添加到nuxt.config.js的...

    web-worker-indexeddb:使用Web Worker访问服务器并将数据保存在IndexedDB中以供离线使用

    web-worker-indexeddb 使用 Web Worker 访问服务器,并将数据保存在 IndexedDB 中以供离线使用。 在 IndexedDB 中保存数据后,应用程序将始终离线访问数据,并将通过 Web Worker 刷新数据。

    worker-pyodide-console:使用Webworker的pyodide控制台示例

    《使用Webworker的Pyodide控制台:worker-pyodide-console详解》 在现代Web应用中,JavaScript作为客户端编程的主要语言,其单线程执行模型有时会限制应用程序的性能。为了解决这个问题,Webworker被引入,它允许在...

Global site tag (gtag.js) - Google Analytics