【版权所有】唐霜 www.tangshu本文版权归作者所有,未经授权不得转载。本文版权归作者所有,未经授权不得转载。ang.net【转载请注明来源】quicker-worker作为试验品已未经授权,禁止复制转载。【关注微信公众号:wwwtangshuangnet】经被弃用,请使用hello-webworker替代。
【版权所有】唐霜 www.tangshu著作权归作者所有,禁止商业用途转载。【版权所有,侵权必究】ang.net【本文受版权保护】【原创不易,请尊重版权】【本文首发于唐霜的博客】
上一篇介绍了vue-worker,受其启转载请注明出处:www.tangshuang.net著作权归作者所有,禁止商业用途转载。发,打算自己写两个函数,用来快速实现自己【版权所有,侵权必究】本文版权归作者所有,未经授权不得转载。的worker需求。vue-worker【原创内容,转载请注明出处】【原创内容,转载请注明出处】作者说无法做到关闭worker,我要弥补本文版权归作者所有,未经授权不得转载。原创内容,盗版必究。这个问题。废话不多,我已经把代码托管到g【版权所有,侵权必究】【版权所有,侵权必究】ithub,点击这里看源码。
【版权所有,侵权必究】著作权归作者所有,禁止商业用途转载。著作权归作者所有,禁止商业用途转载。没错,两个个函数就是你要的一切!其中,真【原创内容,转载请注明出处】【作者:唐霜】正对外的接口就是create和run两个著作权归作者所有,禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】函数。create是创建一个可以后续操作【版权所有】唐霜 www.tangshuang.net【原创不易,请尊重版权】的worker实例,而run就是只执行一本文版权归作者所有,未经授权不得转载。【作者:唐霜】遍就自己关掉的一次性worker操作。
转载请注明出处:www.tangshua【关注微信公众号:wwwtangshuangnet】转载请注明出处:www.tangshuang.netng.net转载请注明出处:www.tangshua未经授权,禁止复制转载。著作权归作者所有,禁止商业用途转载。ng.net【未经授权禁止转载】API
create(factory, options)
create函数通过传入一个要在work【本文受版权保护】原创内容,盗版必究。er线程中执行的函数,返回一个worke【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有,未经授权不得转载。r实例,这个worker实例就是通过ne未经授权,禁止复制转载。【原创内容,转载请注明出处】w Worker返回的实例。同时,它还多本文作者:唐霜,转载请注明出处。未经授权,禁止复制转载。出两个接口:.invoke和.close未经授权,禁止复制转载。【本文首发于唐霜的博客】,用于便捷操作。其实这两个接口可以使用原【访问 www.tangshuang.net 获取更多精彩内容】原创内容,盗版必究。生的postMessage和termin原创内容,盗版必究。本文版权归作者所有,未经授权不得转载。ate方法替换,不过因为我们使用到了bl【本文受版权保护】著作权归作者所有,禁止商业用途转载。ob,所以还要销毁我们创建的blob,所本文版权归作者所有,未经授权不得转载。本文版权归作者所有,未经授权不得转载。以在close方法的时候要执行这一步。
原创内容,盗版必究。转载请注明出处:www.tangshua原创内容,盗版必究。本文版权归作者所有,未经授权不得转载。ng.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 获取更多精彩内容】些注意点
【原创内容,转载请注明出处】【原创不易,请尊重版权】【原创不易,请尊重版权】- 是在worker线程中执行,所以不能进行【本文首发于唐霜的博客】【版权所有,侵权必究】DOM等操作,只能用于一些计算性操作 著作权归作者所有,禁止商业用途转载。【关注微信公众号:wwwtangshua本文版权归作者所有,未经授权不得转载。著作权归作者所有,禁止商业用途转载。ngnet】本文版权归作者所有,未经授权不得转载。
- 如果要得到返回结果,必须return一个【版权所有】唐霜 www.tangshuang.net未经授权,禁止复制转载。返回值 【转载请注明来源】【原创内容,转载请注明出处】著作权归作者所有,禁止商业用途转载。
- 参数个数问题:如果只有一个参数,那么wk转载请注明出处:www.tangshuang.net本文版权归作者所有,未经授权不得转载。.invoke()也发送过去一个参数,这本文作者:唐霜,转载请注明出处。【原创不易,请尊重版权】是等价的,如果factory函数有多个参【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】数,那么wk.invoke()发送过去一【版权所有,侵权必究】【关注微信公众号:wwwtangshuangnet】个数组,这个数组中的元素就是参数列表,这本文版权归作者所有,未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】个数组会被用作apply的第二个参数,所未经授权,禁止复制转载。本文版权归作者所有,未经授权不得转载。以这个中情况下invoke的数据和fac著作权归作者所有,禁止商业用途转载。【本文受版权保护】tory的第一个参数不等价,这点要极其注【版权所有,侵权必究】【原创内容,转载请注明出处】意! 【本文受版权保护】转载请注明出处:www.tangshua【原创内容,转载请注明出处】转载请注明出处:www.tangshuang.netng.net著作权归作者所有,禁止商业用途转载。【原创不易,请尊重版权】
有关options和更多信息,可以在我那本文版权归作者所有,未经授权不得转载。著作权归作者所有,禁止商业用途转载。个github上阅读Readme,不过是【未经授权禁止转载】【版权所有】唐霜 www.tangshuang.net英文版的,英文版的介绍比这里更加详细,如【关注微信公众号:wwwtangshuangnet】【版权所有,侵权必究】果你阅读没有障碍的话,可以直接阅读英文。
【作者:唐霜】【原创不易,请尊重版权】【作者:唐霜】wk.invoke([…args])
上面通过create返回了一个wk,它是未经授权,禁止复制转载。本文版权归作者所有,未经授权不得转载。一个真实的worker实例,但是我们给它【原创内容,转载请注明出处】【本文受版权保护】附加了两个新方法,一个是invoke。i转载请注明出处:www.tangshuang.net【原创内容,转载请注明出处】nvoke基于worker.postMe【原创内容,转载请注明出处】【版权所有】唐霜 www.tangshuang.netssage,不过进行了封装,在post内【本文首发于唐霜的博客】【关注微信公众号:wwwtangshuangnet】部实行了wk的onmessage和one本文作者:唐霜,转载请注明出处。【版权所有,侵权必究】rrer监听,并把整个post结果返回一【访问 www.tangshuang.net 获取更多精彩内容】【版权所有】唐霜 www.tangshuang.net个promise,所以post之后要用t本文作者:唐霜,转载请注明出处。【作者:唐霜】hen来得到运算的结果。
著作权归作者所有,禁止商业用途转载。著作权归作者所有,禁止商业用途转载。【版权所有,侵权必究】著作权归作者所有,禁止商业用途转载。wk是可以复用的,通过create创建的转载请注明出处:www.tangshuang.net【版权所有】唐霜 www.tangshuang.net实例仅仅是在worker线程内存中驻用了【关注微信公众号:wwwtangshuangnet】【作者:唐霜】一个函数,这个函数本身并不运行,需要调用未经授权,禁止复制转载。【版权所有】唐霜 www.tangshuang.netwk.invoke来执行这个函数。所以,著作权归作者所有,禁止商业用途转载。【本文受版权保护】wk.invoke可以反复调用,针对你不本文作者:唐霜,转载请注明出处。原创内容,盗版必究。同的要用来运算的数据,传入后得到对应的结本文作者:唐霜,转载请注明出处。著作权归作者所有,禁止商业用途转载。果。
本文作者:唐霜,转载请注明出处。本文版权归作者所有,未经授权不得转载。wk.close()
close方法除了关闭worker线程之【未经授权禁止转载】转载请注明出处:www.tangshuang.net外,还清除了我们在blob中创建的内容,【版权所有,侵权必究】本文作者:唐霜,转载请注明出处。同时把wk置空,实现清除效果。
【版权所有,侵权必究】【原创不易,请尊重版权】【版权所有,侵权必究】run(factory, args)
create是创建了一个worker实例【访问 www.tangshuang.net 获取更多精彩内容】【版权所有】唐霜 www.tangshuang.net对象,可以反复调用invoke接口来执行【本文首发于唐霜的博客】转载请注明出处:www.tangshuang.net内部的那个函数。但有的时候我们只需要在w【访问 www.tangshuang.net 获取更多精彩内容】【访问 www.tangshuang.net 获取更多精彩内容】orker中运算一次,那么这种情况下就不【原创不易,请尊重版权】【访问 www.tangshuang.net 获取更多精彩内容】需要执行上面那么多步骤。于是我封装了ru本文版权归作者所有,未经授权不得转载。【版权所有】唐霜 www.tangshuang.netn函数,其实是把create函数的方法全【转载请注明来源】【本文首发于唐霜的博客】部调用一遍。
【本文首发于唐霜的博客】未经授权,禁止复制转载。run(arr => {
arr.forEach(item => item.name = item.id + item.time)
// 如果arr有100k行
return arr // 这一行必须要}, [...100k rows...]).then(output => {
// ...})
通过这个函数,你就可以一次性执行,执行完【未经授权禁止转载】【本文受版权保护】之后,就会被销毁。
【访问 www.tangshuang.n转载请注明出处:www.tangshuang.net【原创不易,请尊重版权】et 获取更多精彩内容】【转载请注明来源】【访问 www.tangshuang.n转载请注明出处:www.tangshuang.net【原创不易,请尊重版权】et 获取更多精彩内容】【访问 www.tangshuang.n【本文首发于唐霜的博客】著作权归作者所有,禁止商业用途转载。et 获取更多精彩内容】Blob
源码中有一个makecontents函数转载请注明出处:www.tangshuang.net【版权所有】唐霜 www.tangshuang.net,这个不是对外的接口,而是内部用于创建b著作权归作者所有,禁止商业用途转载。转载请注明出处:www.tangshuang.netlob contents的函数。首先要解本文版权归作者所有,未经授权不得转载。未经授权,禁止复制转载。释一下blob以及它在这里的作用。
【作者:唐霜】【本文首发于唐霜的博客】blob是一个file-like对象,保本文版权归作者所有,未经授权不得转载。转载请注明出处:www.tangshuang.net持raw data,可以在这里了解具体的解释。它有什么用呢?可以用来在【版权所有】唐霜 www.tangshuang.net【转载请注明来源】本地加载图片、文件的原始数据,而且可以提【原创不易,请尊重版权】原创内容,盗版必究。供一个blob:开头的url,这样,显示转载请注明出处:www.tangshuang.net【本文首发于唐霜的博客】本地图片就无需上传到服务器上使用一个服务【本文受版权保护】【版权所有】唐霜 www.tangshuang.net器端的url来显示了。同样的道理,js也【版权所有】唐霜 www.tangshuang.net【作者:唐霜】是一样的,通过一个本地的blob url【原创内容,转载请注明出处】【关注微信公众号:wwwtangshuangnet】来代替服务端url,把js源码放到这个b【作者:唐霜】【转载请注明来源】lob中,这样就可以实现无需一个真实的j【原创内容,转载请注明出处】【本文受版权保护】s文件,而是把js的原始脚本放在内存中,本文作者:唐霜,转载请注明出处。原创内容,盗版必究。还可以执行。
转载请注明出处:www.tangshua未经授权,禁止复制转载。【未经授权禁止转载】ng.net【访问 www.tangshuang.n本文作者:唐霜,转载请注明出处。著作权归作者所有,禁止商业用途转载。et 获取更多精彩内容】【原创不易,请尊重版权】著作权归作者所有,禁止商业用途转载。我们来看下blob的基本用法:
【访问 www.tangshuang.n转载请注明出处:www.tangshuang.net【转载请注明来源】et 获取更多精彩内容】【版权所有,侵权必究】未经授权,禁止复制转载。var blob = new Blob([contents], {type: 'application/javascript'})var url = URL.createObjectURL(blob) // URL是一个window下的全局变量
Blob对象第一个参数是一个数组,数组就本文作者:唐霜,转载请注明出处。【原创不易,请尊重版权】一个元素,这个元素的内容就是raw da本文作者:唐霜,转载请注明出处。【本文受版权保护】ta,可以是图片的raw data也可以【作者:唐霜】【作者:唐霜】是js脚本的内容(字符串)。这也是为什么【版权所有,侵权必究】原创内容,盗版必究。makecontents函数返回的是一个转载请注明出处:www.tangshuang.net【原创不易,请尊重版权】字符串。
【本文受版权保护】【版权所有】唐霜 www.tangshu【访问 www.tangshuang.net 获取更多精彩内容】未经授权,禁止复制转载。ang.net【访问 www.tangshuang.n未经授权,禁止复制转载。【原创内容,转载请注明出处】et 获取更多精彩内容】通过URL.createObjectUR未经授权,禁止复制转载。【未经授权禁止转载】L方法就可以创建一个类似
著作权归作者所有,禁止商业用途转载。未经授权,禁止复制转载。【本文首发于唐霜的博客】blob:d3958f5c-0777-0845-9dcf-2cb28783acaf
一样的url,直接访问这个地址还真的可以转载请注明出处:www.tangshuang.net转载请注明出处:www.tangshuang.net看到对应的文件内容。
【原创不易,请尊重版权】著作权归作者所有,禁止商业用途转载。转载请注明出处:www.tangshua本文版权归作者所有,未经授权不得转载。【原创内容,转载请注明出处】ng.net这就是我们需要的最核心的关于blob的内【原创不易,请尊重版权】【原创不易,请尊重版权】容。
【访问 www.tangshuang.n著作权归作者所有,禁止商业用途转载。著作权归作者所有,禁止商业用途转载。et 获取更多精彩内容】未经授权,禁止复制转载。【版权所有】唐霜 www.tangshu本文版权归作者所有,未经授权不得转载。【关注微信公众号:wwwtangshuangnet】ang.net【版权所有,侵权必究】web worker
关于web worker的具体内容我就不著作权归作者所有,禁止商业用途转载。【关注微信公众号:wwwtangshuangnet】多解释了,这里主要讲一下在我们这里实现的【转载请注明来源】【本文首发于唐霜的博客】逻辑。
【版权所有】唐霜 www.tangshu【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有,禁止商业用途转载。ang.net【未经授权禁止转载】【本文首发于唐霜的博客】【转载请注明来源】我们借助makecontents函数,在本文版权归作者所有,未经授权不得转载。【本文受版权保护】blob的帮助下,相当于创建了一个.js转载请注明出处:www.tangshuang.net未经授权,禁止复制转载。文件,这个文件的内容将会在worker线【版权所有】唐霜 www.tangshuang.net本文作者:唐霜,转载请注明出处。程中执行。
【版权所有】唐霜 www.tangshu【作者:唐霜】【转载请注明来源】ang.net
注意makecontents函数返回的【版权所有】唐霜 www.tangshuang.net【版权所有,侵权必究】是一个字符串,其中有一句var fun = ${factory},字符串在解析的时候,factory函数【未经授权禁止转载】【关注微信公众号:wwwtangshuangnet】体会被自动转换为字符串,所以实际上最后你【版权所有】唐霜 www.tangshuang.net著作权归作者所有,禁止商业用途转载。会发现,在blob中,这段字符串会按照我原创内容,盗版必究。著作权归作者所有,禁止商业用途转载。们想要的方式呈现出来。
在worker线程中,我们使用self代【本文首发于唐霜的博客】【未经授权禁止转载】替global变量,但是还要注意一点,因未经授权,禁止复制转载。本文作者:唐霜,转载请注明出处。为makecontents函数中的字符串未经授权,禁止复制转载。本文版权归作者所有,未经授权不得转载。,是不会被babel转码的,字符串怎么可【版权所有】唐霜 www.tangshuang.net【未经授权禁止转载】能被解析呢?所以,在字符串中,一定要使用【作者:唐霜】原创内容,盗版必究。浏览器可以执行的语法,浏览器不支持的语法本文作者:唐霜,转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】还是不要用。
著作权归作者所有,禁止商业用途转载。【关注微信公众号:wwwtangshua【原创内容,转载请注明出处】【本文受版权保护】ngnet】


老哥,我使用vue-worker时,遇到了个问题,不知道老哥是否能替我解惑。就是我想在worker.run里面持续post出来当前时间,我在run里面settimeout和setinterval结果都只能执行一次,不知这种场景该怎么处理呢?
methods: {
startClock() {
this.clock_worker = this.$worker
.run(() =>{
// var timer=()=>{
// setTimeout(timer,1000);
// }
// timer();
// setInterval(postMessage(new Date()),1000)
//———PS: settimeout and setInterval 均无法不生效,只执行出来一次 })
.then(res => console.log(res)) // logs ‘this.$worker run 1: Function in other thread’
.catch(console.error); // logs any possible error
}
},
quicker-worker已经弃用了,请用hello-webworker代替。https://github.com/tangshuang/hello-webworker
关于你这个问题。内部实现是由Promise实现的,所以你在worker里面postMessage再多次,then里面也只会执行一次。
解决这个问题,要用hello-webworker的watch方法,传入一个回调函数,在worker里面,用$notify通知,这样就可以无限次调用。