Dron 博客

将 WebWorker 改造成无外链文件模式

WebWorker 允许我们在浏览器中使用多线程来进行高耗时计算,但是,WebWorker 必须引用同域的 JS 文件,这在有些场景下不是很方便应用。

我尝试对此进行包装,期望调用 WebWorker 的地方可以直接声明 Worker 文件的内容,不需再外链一个 JS 文件,以下是未经所有浏览器测试的代码,如需应用,你可能需要做些测试和改进。

var myWorker = function(){
var functionBodyRegx, URL, contentType, code, url;

functionBodyRegx = /^[^{]+\{([\s\S]*)\}$/;
URL = window.URL || window.webkitURL;
contentType = { type: "text/javascript; charset=utf-8" };

return function( fn ){
code = fn.toString().match( functionBodyRegx )[ 1 ];
url = window.opera ?
"data:application/javascript," + encodeURIComponent( code ) :
URL.createObjectURL( new Blob( [ code ], contentType ) );

return new Worker( url );
}
}();

测试代码:

var worker = new myWorker( function(){
onmessage = function( event ){
postMessage( event.data );
}
} );

worker.onmessage = function( event ){
alert( event.data.message );
};

worker.postMessage( { message: "hello myWorker!" } );

戳这里

在 Chrome/Safari/Firefox 下测试通过,IE/Opara 下未做测试。