据我所知，web worker需要写在一个单独的JavaScript文件中，并像这样调用:
new Worker('longrunning.js')
我正在使用闭包编译器来合并和缩小我所有的JavaScript源代码，我不希望将我的worker放在单独的文件中进行分发。有什么办法可以做到吗?
new Worker(function() {
//Long-running work here
});
既然一级函数对JavaScript如此重要，为什么标准的后台工作方式必须从web服务器加载整个其他JavaScript文件呢?
当前回答
是的，这是可能的，我做到了使用Blob文件和传递回调
我将向您展示我编写的一个类是做什么的，以及它如何在后台管理回调的执行。
首先，你要实例化GenericWebWorker，使用你想要传递给回调的任何数据，这些数据将在WebWorker中执行，包括你想要使用的函数，在这种情况下，一个数字，一个日期和一个叫做blocker的函数
var worker = new GenericWebWorker(100, new Date(), blocker)
这个阻塞器函数将在n毫秒内执行一个无限while
function blocker (ms) {
var now = new Date().getTime();
while(true) {
if (new Date().getTime() > now +ms)
return;
}
}
然后像这样用
worker.exec((num, date, fnBlocker) => {
/*Everithing here does not block the main thread
and this callback has access to the number, date and the blocker */
fnBlocker(10000) //All of this run in backgrownd
return num*10
}).then(d => console.log(d)) //Print 1000
现在，是时候看看下面例子中的神奇之处了
/*https://github.com/fercarvo/GenericWebWorker*/ class GenericWebWorker { constructor(...ags) { this.args = ags.map(a => (typeof a == 'function') ? {type:'fn', fn:a.toString()} : a) } async exec(cb) { var wk_string = this.worker.toString(); wk_string = wk_string.substring(wk_string.indexOf('{') + 1, wk_string.lastIndexOf('}')); var wk_link = window.URL.createObjectURL( new Blob([ wk_string ]) ); var wk = new Worker(wk_link); wk.postMessage({ callback: cb.toString(), args: this.args }); var resultado = await new Promise((next, error) => { wk.onmessage = e => (e.data && e.data.error) ? error(e.data.error) : next(e.data); wk.onerror = e => error(e.message); }) wk.terminate(); window.URL.revokeObjectURL(wk_link); return resultado } async parallel(arr, cb) { var res = [...arr].map(it => new GenericWebWorker(it, ...this.args).exec(cb)) var all = await Promise.all(res) return all } worker() { onmessage = async function (e) { try { var cb = new Function(`return ${e.data.callback}`)(); var args = e.data.args.map(p => (p.type == 'fn') ? new Function(`return ${p.fn}`)() : p); try { var result = await cb.apply(this, args); //If it is a promise or async function return postMessage(result) } catch (e) { throw new Error(`CallbackError: ${e}`) } } catch (e) { postMessage({error: e.message}) } } } } function blocker (ms) { var now = new Date().getTime(); while(true) { if (new Date().getTime() > now +ms) return; } } setInterval(()=> console.log("Not blocked " + Math.random()), 1000) console.log("\n\nstarting blocking code in Worker\n\n") var worker = new GenericWebWorker(100, new Date(), blocker) worker.exec((num, date, fnBlocker) => { fnBlocker(7000) //All of this run in backgrownd return num*10 }) .then(d => console.log(`\n\nEnd of blocking code: result ${d}\n\n`)) //Print 1000
其他回答
你可以在同一个javascript文件中使用内联的webworker。
下面的文章将帮助您轻松理解webworker及其局限性和调试webworker。
精通网络工作者
使用Blob方法，对于工人工厂来说是这样的:
var BuildWorker = function(foo){
var str = foo.toString()
.match(/^\s*function\s*\(\s*\)\s*\{(([\s\S](?!\}$))*[\s\S])/)[1];
return new Worker(window.URL.createObjectURL(
new Blob([str],{type:'text/javascript'})));
}
所以你可以这样使用它…
var myWorker = BuildWorker(function(){
//first line of worker
self.onmessage(){....};
//last line of worker
});
编辑:
我只是进一步扩展了这个想法，以便更容易地进行跨线程通信:bridge -worker.js。
编辑2:
上面的链接是我创建的一个要点。后来又有人把它变成了真正的回购。
我发现CodePen目前不语法高亮内联<script>标签，不是type="text/javascript"(或没有类型属性)。
因此，我设计了一个类似但略有不同的解决方案，使用带break的标记块，这是摆脱<script>标记而不创建包装器函数(这是不必要的)的唯一方法。
<!DOCTYPE html> <script id="worker1"> worker: { // Labeled block wrapper if (typeof window === 'object') break worker; // Bail if we're not a Worker self.onmessage = function(e) { self.postMessage('msg from worker'); }; // Rest of your worker code goes here. } </script> <script> var blob = new Blob([ document.querySelector('#worker1').textContent ], { type: "text/javascript" }) // Note: window.webkitURL.createObjectURL() in Chrome 10+. var worker = new Worker(window.URL.createObjectURL(blob)); worker.onmessage = function(e) { console.log("Received: " + e.data); } worker.postMessage("hello"); // Start the worker. </script>
看一下vkThread插件。使用htis插件，你可以在主代码中获取任何函数，并在线程(web worker)中执行它。所以，你不需要创建一个特殊的“web-worker文件”。
http://www.eslinstructor.net/vkthread/
——瓦迪姆
html5rocks在HTML中嵌入web worker代码的解决方案相当糟糕。 而一团转义的JavaScript-as-a-string也不会更好，尤其是因为它使工作流程复杂化(闭包编译器不能操作字符串)。
我个人非常喜欢toString方法，但是@dan-man THAT正则表达式!
我喜欢的方法是:
// Build a worker from an anonymous function body
var blobURL = URL.createObjectURL( new Blob([ '(',
function(){
//Long-running work here
}.toString(),
')()' ], { type: 'application/javascript' } ) ),
worker = new Worker( blobURL );
// Won't be needing this anymore
URL.revokeObjectURL( blobURL );
支持是这三个表的交集:
http://caniuse.com/#feat=webworkers http://caniuse.com/#feat=blobbuilder http://caniuse.com/#feat=bloburls
然而，这对SharedWorker不起作用，因为URL必须是精确匹配的，即使可选的'name'参数匹配。对于SharedWorker，您需要一个单独的JavaScript文件。
2015年更新——ServiceWorker奇点到来
现在有一种更有效的方法来解决这个问题。 同样，将工作代码存储为函数(而不是静态字符串)，并使用. tostring()进行转换，然后将代码插入CacheStorage中您选择的静态URL下。
// Post code from window to ServiceWorker...
navigator.serviceWorker.controller.postMessage(
[ '/my_workers/worker1.js', '(' + workerFunction1.toString() + ')()' ]
);
// Insert via ServiceWorker.onmessage. Or directly once window.caches is exposed
caches.open( 'myCache' ).then( function( cache )
{
cache.put( '/my_workers/worker1.js',
new Response( workerScript, { headers: {'content-type':'application/javascript'}})
);
});
有两种可能的退路。ObjectURL和上面一样，或者更无缝地将一个真正的JavaScript文件放在/my_workers/worker1.js
这种方法的优点是:
还可以支持SharedWorkers。 选项卡可以在固定地址共享单个缓存副本。blob方法为每个选项卡增加随机objecturl。
