不使用额外的js文件创建 web workers-阿里云开发者社区

开发者社区> deggs7> 正文

不使用额外的js文件创建 web workers

简介: ### 问题 web workers 需要将要执行的代码,定义为单独的js,然后通过以下方式来引用 ``` new Worker('some/path/process.js') ``` 但是,当工程本身需要将所有的代码进行编译并合并成一个文件时,这种单独的js的方式,就还需要一些特殊处理。 或者,当页面就是一个单独的html,不希望引用额外的js文件时,web work
+关注继续查看

问题

web workers 需要将要执行的代码,定义为单独的js,然后通过以下方式来引用

new Worker('some/path/process.js')

但是,当工程本身需要将所有的代码进行编译并合并成一个文件时,这种单独的js的方式,就还需要一些特殊处理。

或者,当页面就是一个单独的html,不希望引用额外的js文件时,web workers本身的初始化方式都会有些不方便。

解决

根据 Worker 的 API,可以基于 Blobs 构建 Worker 实例。

目前,没有什么官方指导的方式,可以通过script标签来定义要执行的代码:

  • html部分
<div id="counter"></div>
<script id="myWorker" type="text/js-worker">
    // 因为type不是text/javascript, 所以不会被js引擎处理
    var i = 0;
    setInterval(function() {
        i++;
        postMessage(i);
    }, 1000);
</script>
  • js部分
var myWorker = null,
var workerData = new Blob([document.getElementById('myWorker').textContent], {
    type: "text/javascript"
});

function init() {
    // 创建worker,包含"js-worker"中定义的代码
    var myWorker = new Worker(window.URL.createObjectURL(workerData));

    myWorker.onmessage = function (e) {
        document.getElementById('counter').innerHTML = e.data;
    };
}

init();

这样,就可以把worker执行的代码,嵌套在当前的页面中,而不用单独的js文件。

更进一步方便,还可以再避免定义单独的script标签,直接将function转换为Blob的方式,如下:

function fn2workerURL(fn) {
  var blob = new Blob(['('+fn.toString()+')()'], {type: 'application/javascript'})
  return URL.createObjectURL(blob)
}

修改开始的例子,就可以按以下方式来写:

  • 纯js部分

var myWorker = null;

var myWorker = function() {
    var i = 0;
    setInterval(function() {
        i++;
        postMessage(i);
    }, 1000);
}

var workerData = new Blob(['(' + myWorker.toString() + ')()'], {
    type: "text/javascript"
});

function init() {
    if (typeof (Worker) === undefined) {
        alert('No webworker supported');
        return false;
    }

    myWorker = new Worker(window.URL.createObjectURL(workerData));
    myWorker.onmessage = function (e) {
        document.getElementById('counter').innerHTML = e.data;
    };
}

init();

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
有趣 不用js也能创建silverlight
如果你已经安装了silverlight并能在IE7或Firefox 2中运行,请直接复制下边的代码存成.htm来浏览。                                                      No Javascript, wheeeee!!!                                                         silverlight只是浏览器的为了呈现xaml的一个插件,不一定非要JavaScript。
661 0
js同域名下不同文件下使用coookie
//写cookies function setCookie(name,value) { var Days = 30; var exp = new Date(); exp.
575 0
ant build.xml文件将使用到的属性放到一个额外的build.properties文件里
ant build.xml文件将使用到的属性放到一个额外的build.properties文件里
8 0
长文解析:作为容器底层技术的半壁江山, cgroup如何突破并发创建瓶颈?
io_uring 作为一种新型高性能异步编程框架,代表着 Linux 内核未来的方向,当前仍处于快速发展中。阿里云联合 InfoQ 发起《io_uring 介绍及应用实践》的技术公开课,围绕 OpenAnolis 龙蜥社区 Anolis OS 8 全方位解析高性能存储场景。
241 0
IntelliJ IDEA 12 创建Web项目 教程 超详细版
原文:IntelliJ IDEA 12 创建Web项目 教程 超详细版 IntelliJ IDEA 12 新版本发布 第一时间去官网看了下  黑色的主题 很给力 大体使用了下  对于一开始就是用eclipse的童鞋们 估计很难从eclipse中走出来 当然 我也很艰难的走在路上 ... 首先要说一点,在IntelliJ IDEA里面“new Project” 就相当于我们eclipse的“workspace”,而“new Module”才是创建一个工程。
1043 0
创建文件
创建和读出文件p2.py和p3.py #!/usr/bin/pythonimport osls=os.linesepfname = raw_input('Enter filename: ')printwhile True:        if os.
549 0
linux创建随机数并写文件处理
一、案例代码 /**************************************************************** * Name   : rondom_create_score.
775 0
+关注
deggs7
专注数据可视化与前端技术
4
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载