据我所知，web worker需要写在一个单独的JavaScript文件中，并像这样调用:
new Worker('longrunning.js')
我正在使用闭包编译器来合并和缩小我所有的JavaScript源代码，我不希望将我的worker放在单独的文件中进行分发。有什么办法可以做到吗?
new Worker(function() {
//Long-running work here
});
既然一级函数对JavaScript如此重要，为什么标准的后台工作方式必须从web服务器加载整个其他JavaScript文件呢?
当前回答
在worker中运行函数的一行代码:
const FunctionalWorker = fn => new Worker(window.URL.createObjectURL(new Blob(["(" + fn.toString() + ")()"], {type: "text/javascript"})));
使用示例:
let fn = FunctionalWorker(() => {
self.postMessage("hi");
});
fn.onmessage = msg => {
console.log(msg);
};
其他回答
你可以在同一个javascript文件中使用内联的webworker。
下面的文章将帮助您轻松理解webworker及其局限性和调试webworker。
精通网络工作者
你可以把worker.js文件的内容放在反勾号(允许多行字符串常量)中，然后像这样创建一个blob:
var workerScript = `
self.onmessage = function(e) {
self.postMessage('message from worker');
};
// rest of worker code goes here
`;
var worker =
new Worker(createObjectURL(new Blob([workerScript], { type: "text/javascript" })));
如果出于某种原因，您不想为worker使用单独的脚本标记，那么这是非常方便的。
看一下vkThread插件。使用htis插件，你可以在主代码中获取任何函数，并在线程(web worker)中执行它。所以，你不需要创建一个特殊的“web-worker文件”。
http://www.eslinstructor.net/vkthread/
——瓦迪姆
我认为更好的方法是使用Blob对象，下面你可以看到一个简单的例子。
// create a Blob object with a worker code
var blob = new Blob(["onmessage = function(e) { postMessage('msg from worker'); }"]);
// Obtain a blob URL reference to our worker 'file'.
var blobURL = window.URL.createObjectURL(blob);
// create a Worker
var worker = new Worker(blobURL);
worker.onmessage = function(e) {
console.log(e.data);
};
worker.postMessage("Send some Data");
您可以创建一个JavaScript文件，该文件可以感知其执行上下文，并且可以充当父脚本和工作脚本。让我们从这样一个文件的基本结构开始:
(function(global) {
var is_worker = !this.document;
var script_path = is_worker ? null : (function() {
// append random number and time to ID
var id = (Math.random()+''+(+new Date)).substring(2);
document.write('<script id="wts' + id + '"></script>');
return document.getElementById('wts' + id).
previousSibling.src;
})();
function msg_parent(e) {
// event handler for parent -> worker messages
}
function msg_worker(e) {
// event handler for worker -> parent messages
}
function new_worker() {
var w = new Worker(script_path);
w.addEventListener('message', msg_worker, false);
return w;
}
if (is_worker)
global.addEventListener('message', msg_parent, false);
// put the rest of your library here
// to spawn a worker, use new_worker()
})(this);
如您所见，脚本包含父进程和工作者进程的所有代码，检查它自己的实例是否是一个具有!document的工作者进程。有点笨拙的script_path计算用于精确计算相对于父页的脚本路径，因为提供给新Worker的路径是相对于父页的，而不是相对于脚本的。
