据我所知，web worker需要写在一个单独的JavaScript文件中，并像这样调用:
new Worker('longrunning.js')
我正在使用闭包编译器来合并和缩小我所有的JavaScript源代码，我不希望将我的worker放在单独的文件中进行分发。有什么办法可以做到吗?
new Worker(function() {
//Long-running work here
});
既然一级函数对JavaScript如此重要，为什么标准的后台工作方式必须从web服务器加载整个其他JavaScript文件呢?
当前回答
看一下vkThread插件。使用htis插件，你可以在主代码中获取任何函数，并在线程(web worker)中执行它。所以，你不需要创建一个特殊的“web-worker文件”。
http://www.eslinstructor.net/vkthread/
——瓦迪姆
其他回答
我喜欢ifbamoq给出的答案，但由于堆栈溢出的积分政策，我无法评论。因此，我将给出一个示例，展示一些正在进行的密集工作——以及它如何不锁定主线程。
如果你像我一样双击html文件，把它们当成小程序，就不会遇到空原点的CORS问题。: -)
<!DOCTYPE html> <html> <head> <title>Worker example: One-core computation</title> </head> <body> <p>The highest prime number discovered so far is: <div id="result"></div></p> </body> <script> // let worker = new Worker('WebWorker.js'); // lets skip this to avoid null origin issues let WorkerFn = (event) => { let isPrime = false; for (let n = 2; n <= 1_000_000; n++) { isPrime = true; for(let i = 2; i <= Math.sqrt(n); i++) if (n % i == 0) isPrime = false; // If you can get thru all this shit and survive, ur prime! if (isPrime) postMessage(n); } } let worker = new Worker(window.URL.createObjectURL(new Blob(["(" + WorkerFn.toString() + ")()"], {type: "text/javascript"}))); worker.onmessage = (event) => { result.innerHTML = event.data; } </script> </html>
这只是上面的一个补充-我在jsFiddle中有一个很好的模板用于测试web worker。而不是Blob，它使用jsFiddles ?js api:
function workerFN() {
self.onmessage = function(e) {
switch(e.data.name) {
case "" :
break;
default:
console.error("Unknown message:", e.data.name);
}
}
}
// This is a trick to generate real worker script that is loaded from server
var url = "/echo/js/?js="+encodeURIComponent("("+workerFN.toString()+")()");
var worker = new Worker(url);
worker.addEventListener("message", function(e) {
switch(e.data.name) {
case "" :
break;
default:
console.error("Unknown message:", e.data.name);
}
})
有普通的web worker模板和共享worker模板。
在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);
};
http://www.html5rocks.com/en/tutorials/workers/basics/#toc-inlineworkers
如果您希望动态地创建工作人员脚本，或者创建一个自包含的页面，而不必创建单独的工作人员文件，该怎么办?使用Blob()，您可以通过将工作代码的URL句柄创建为字符串，将工作代码“内联”到与主逻辑相同的HTML文件中
BLOB inline worker的完整示例:
<!DOCTYPE html> <script id="worker1" type="javascript/worker"> // This script won't be parsed by JS engines because its type is javascript/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>
我发现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>
