quicker-worker作为试验品已【原创内容，转载请注明出处】【本文受版权保护】经被弃用，请使用hello-webworker著作权归作者所有，禁止商业用途转载。替代。【本文首发于唐霜的博客】

著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。【转载请注明来源】本文版权归作者所有，未经授权不得转载。

未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。【作者：唐霜】

上一篇介绍了vue-worker，受其启【未经授权禁止转载】未经授权，禁止复制转载。发，打算自己写两个函数，用来快速实现自己本文版权归作者所有，未经授权不得转载。【关注微信公众号：wwwtangshuangnet】的worker需求。vue-worker原创内容，盗版必究。未经授权，禁止复制转载。作者说无法做到关闭worker，我要弥补【原创不易，请尊重版权】本文版权归作者所有，未经授权不得转载。这个问题。废话不多，我已经把代码托管到g未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。ithub，点击这里【版权所有，侵权必究】看源码。本文作者：唐霜，转载请注明出处。

【原创内容，转载请注明出处】【本文受版权保护】【版权所有】唐霜 www.tangshuang.net

没错，两个个函数就是你要的一切！其中，真转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】正对外的接口就是create和run两个【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。函数。create是创建一个可以后续操作著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】的worker实例，而run就是只执行一【本文首发于唐霜的博客】原创内容，盗版必究。遍就自己关掉的一次性worker操作。

著作权归作者所有，禁止商业用途转载。【原创内容，转载请注明出处】转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】

API【版权所有】唐霜 www.tangshuang.net

【版权所有】唐霜 www.tangshuang.net【本文受版权保护】【本文首发于唐霜的博客】【本文受版权保护】

create(factory, opti【作者：唐霜】转载请注明出处：www.tangshuang.netons)

本文作者：唐霜，转载请注明出处。【原创内容，转载请注明出处】【转载请注明来源】【关注微信公众号：wwwtangshuangnet】【版权所有】唐霜 www.tangshuang.net

create函数通过传入一个要在work【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。er线程中执行的函数，返回一个worke本文版权归作者所有，未经授权不得转载。【作者：唐霜】r实例，这个worker实例就是通过ne【转载请注明来源】转载请注明出处：www.tangshuang.netw Worker返回的实例。同时，它还多未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。出两个接口：.invoke和.close【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。，用于便捷操作。其实这两个接口可以使用原未经授权，禁止复制转载。【转载请注明来源】生的postMessage和termin【作者：唐霜】【关注微信公众号：wwwtangshuangnet】ate方法替换，不过因为我们使用到了bl【原创内容，转载请注明出处】【作者：唐霜】ob，所以还要销毁我们创建的blob，所【转载请注明来源】【作者：唐霜】以在close方法的时候要执行这一步。

【关注微信公众号：wwwtangshuangnet】【本文首发于唐霜的博客】著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.net原创内容，盗版必究。

下面来看下用法：原创内容，盗版必究。

原创内容，盗版必究。【本文首发于唐霜的博客】【本文受版权保护】

let wk = create(arr => {
  arr.forEach(item => item.name = item.id + item.time)
  // 如果arr有100k行
  return arr // 这一行必须要})// 这个时候我们只是创建了一个用来处理一个100k行的worker方法，接下来我们来调用它... // 你的其他js代码wk.invoke([...]) //传入一个100k行的数组进行运算.then(output => {
  console.log(output)
  wk.close() // 关掉这个worker释放线程}) // output就是我们要的结果

factory函数的一些要求和使用中的一【本文受版权保护】本文作者：唐霜，转载请注明出处。些注意点

【本文首发于唐霜的博客】【版权所有，侵权必究】未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.net

• 是在worker线程中执行，所以不能进行【关注微信公众号：wwwtangshuangnet】本文作者：唐霜，转载请注明出处。DOM等操作，只能用于一些计算性操作
【作者：唐霜】转载请注明出处：www.tangshuang.net原创内容，盗版必究。
• 如果要得到返回结果，必须return一个转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。返回值
【版权所有，侵权必究】本文版权归作者所有，未经授权不得转载。【未经授权禁止转载】【关注微信公众号：wwwtangshuangnet】【作者：唐霜】
• 参数个数问题：如果只有一个参数，那么wk【作者：唐霜】原创内容，盗版必究。.invoke()也发送过去一个参数，这【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。是等价的，如果factory函数有多个参【版权所有，侵权必究】【未经授权禁止转载】数，那么wk.invoke()发送过去一【原创不易，请尊重版权】【转载请注明来源】个数组，这个数组中的元素就是参数列表，这【原创不易，请尊重版权】著作权归作者所有，禁止商业用途转载。个数组会被用作apply的第二个参数，所【原创内容，转载请注明出处】【本文首发于唐霜的博客】以这个中情况下invoke的数据和fac【原创内容，转载请注明出处】转载请注明出处：www.tangshuang.nettory的第一个参数不等价，这点要极其注【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。意！
【版权所有，侵权必究】本文版权归作者所有，未经授权不得转载。【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.net

有关options和更多信息，可以在我那【作者：唐霜】未经授权，禁止复制转载。个github上阅读Readme，不过是转载请注明出处：www.tangshuang.net【未经授权禁止转载】英文版的，英文版的介绍比这里更加详细，如著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。果你阅读没有障碍的话，可以直接阅读英文。

未经授权，禁止复制转载。【本文首发于唐霜的博客】原创内容，盗版必究。

wk.invoke([…ar【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。gs])

原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。原创内容，盗版必究。

上面通过create返回了一个wk，它是【访问 www.tangshuang.net 获取更多精彩内容】【本文受版权保护】一个真实的worker实例，但是我们给它【作者：唐霜】【转载请注明来源】附加了两个新方法，一个是invoke。i【原创内容，转载请注明出处】著作权归作者所有，禁止商业用途转载。nvoke基于worker.postMe【作者：唐霜】【本文受版权保护】ssage，不过进行了封装，在post内【转载请注明来源】【访问 www.tangshuang.net 获取更多精彩内容】部实行了wk的onmessage和one著作权归作者所有，禁止商业用途转载。【转载请注明来源】rrer监听，并把整个post结果返回一转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。个promise，所以post之后要用t【访问 www.tangshuang.net 获取更多精彩内容】未经授权，禁止复制转载。hen来得到运算的结果。

本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。【转载请注明来源】

wk是可以复用的，通过create创建的转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】实例仅仅是在worker线程内存中驻用了【未经授权禁止转载】【原创不易，请尊重版权】一个函数，这个函数本身并不运行，需要调用本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。wk.invoke来执行这个函数。所以，【访问 www.tangshuang.net 获取更多精彩内容】【本文首发于唐霜的博客】wk.invoke可以反复调用，针对你不【关注微信公众号：wwwtangshuangnet】【作者：唐霜】同的要用来运算的数据，传入后得到对应的结【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。果。

【访问 www.tangshuang.net 获取更多精彩内容】【转载请注明来源】【原创内容，转载请注明出处】【原创不易，请尊重版权】【本文首发于唐霜的博客】

wk.close()著作权归作者所有，禁止商业用途转载。

【作者：唐霜】本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】

close方法除了关闭worker线程之【作者：唐霜】著作权归作者所有，禁止商业用途转载。外，还清除了我们在blob中创建的内容，本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】同时把wk置空，实现清除效果。

【访问 www.tangshuang.net 获取更多精彩内容】【版权所有】唐霜 www.tangshuang.net【转载请注明来源】

run(factory, args)本文版权归作者所有，未经授权不得转载。

【转载请注明来源】本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshuangnet】【本文受版权保护】

create是创建了一个worker实例【作者：唐霜】著作权归作者所有，禁止商业用途转载。对象，可以反复调用invoke接口来执行著作权归作者所有，禁止商业用途转载。【本文受版权保护】内部的那个函数。但有的时候我们只需要在w著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.netorker中运算一次，那么这种情况下就不转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。需要执行上面那么多步骤。于是我封装了ru转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。n函数，其实是把create函数的方法全本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】部调用一遍。

【本文首发于唐霜的博客】【未经授权禁止转载】本文作者：唐霜，转载请注明出处。原创内容，盗版必究。【转载请注明来源】

run(arr => {
  arr.forEach(item => item.name = item.id + item.time)
  // 如果arr有100k行
  return arr // 这一行必须要}, [...100k rows...]).then(output => {
  // ...})

通过这个函数，你就可以一次性执行，执行完本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。之后，就会被销毁。

【本文受版权保护】转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net【作者：唐霜】【本文首发于唐霜的博客】

Blob【本文首发于唐霜的博客】

本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。转载请注明出处：www.tangshuang.net

源码中有一个makecontents函数【本文受版权保护】【访问 www.tangshuang.net 获取更多精彩内容】，这个不是对外的接口，而是内部用于创建b【本文受版权保护】【原创不易，请尊重版权】lob contents的函数。首先要解原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。释一下blob以及它在这里的作用。

【转载请注明来源】未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。

blob是一个file-like对象，保原创内容，盗版必究。【原创内容，转载请注明出处】持raw data，可以在这里【版权所有】唐霜 www.tangshuang.net了解具体的解释。它有什么用呢？可以用来在原创内容，盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】本地加载图片、文件的原始数据，而且可以提转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。供一个blob:开头的url，这样，显示【未经授权禁止转载】【版权所有】唐霜 www.tangshuang.net本地图片就无需上传到服务器上使用一个服务【原创不易，请尊重版权】【未经授权禁止转载】器端的url来显示了。同样的道理，js也【原创内容，转载请注明出处】本文作者：唐霜，转载请注明出处。是一样的，通过一个本地的blob url【原创内容，转载请注明出处】【作者：唐霜】来代替服务端url，把js源码放到这个b转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。lob中，这样就可以实现无需一个真实的j未经授权，禁止复制转载。【版权所有，侵权必究】s文件，而是把js的原始脚本放在内存中，本文作者：唐霜，转载请注明出处。【未经授权禁止转载】还可以执行。

【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshuang.net【关注微信公众号：wwwtangshuangnet】【原创内容，转载请注明出处】【转载请注明来源】

我们来看下blob的基本用法：【关注微信公众号：wwwtangshuangnet】

本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.net【原创不易，请尊重版权】

var blob = new Blob([contents], {type: 'application/javascript'})var url = URL.createObjectURL(blob) // URL是一个window下的全局变量

Blob对象第一个参数是一个数组，数组就【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。一个元素，这个元素的内容就是raw da【转载请注明来源】本文版权归作者所有，未经授权不得转载。ta，可以是图片的raw data也可以【原创不易，请尊重版权】【版权所有】唐霜 www.tangshuang.net是js脚本的内容（字符串）。这也是为什么【转载请注明来源】【作者：唐霜】makecontents函数返回的是一个未经授权，禁止复制转载。【作者：唐霜】字符串。

【版权所有，侵权必究】【原创内容，转载请注明出处】原创内容，盗版必究。原创内容，盗版必究。转载请注明出处：www.tangshuang.net

通过URL.createObjectUR【原创内容，转载请注明出处】【本文受版权保护】L方法就可以创建一个类似

转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。【原创内容，转载请注明出处】

blob:d3958f5c-0777-0845-9dcf-2cb28783acaf

一样的url，直接访问这个地址还真的可以【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。看到对应的文件内容。

【原创不易，请尊重版权】【版权所有，侵权必究】【作者：唐霜】

这就是我们需要的最核心的关于blob的内原创内容，盗版必究。【未经授权禁止转载】容。

本文版权归作者所有，未经授权不得转载。【未经授权禁止转载】【原创内容，转载请注明出处】原创内容，盗版必究。未经授权，禁止复制转载。

web worker【版权所有】唐霜 www.tangshuang.net

【本文受版权保护】【作者：唐霜】本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】

关于web worker的具体内容我就不【原创不易，请尊重版权】【关注微信公众号：wwwtangshuangnet】多解释了，这里主要讲一下在我们这里实现的【版权所有】唐霜 www.tangshuang.net【本文受版权保护】逻辑。

著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。

我们借助makecontents函数，在本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。blob的帮助下，相当于创建了一个.js未经授权，禁止复制转载。原创内容，盗版必究。文件，这个文件的内容将会在worker线【本文受版权保护】本文版权归作者所有，未经授权不得转载。程中执行。
【原创不易，请尊重版权】【访问 www.tangshuang.net 获取更多精彩内容】 注意makecontents函数返回的原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.net是一个字符串，其中有一句var fun = ${factory}，字符串在解析的时候，factory函数【作者：唐霜】本文版权归作者所有，未经授权不得转载。体会被自动转换为字符串，所以实际上最后你原创内容，盗版必究。【原创内容，转载请注明出处】会发现，在blob中，这段字符串会按照我转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。们想要的方式呈现出来。

【作者：唐霜】【原创内容，转载请注明出处】未经授权，禁止复制转载。

在worker线程中，我们使用self代转载请注明出处：www.tangshuang.net【本文受版权保护】替global变量，但是还要注意一点，因【转载请注明来源】本文版权归作者所有，未经授权不得转载。为makecontents函数中的字符串本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。，是不会被babel转码的，字符串怎么可未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。能被解析呢？所以，在字符串中，一定要使用【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。浏览器可以执行的语法，浏览器不支持的语法【原创内容，转载请注明出处】转载请注明出处：www.tangshuang.net还是不要用。

【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。【作者：唐霜】

2017-07-25 10395 blob, worker