IT博客汇 | 将 WebWorker 改造成无外链文件模式

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

dron发表于 2016-10-23 07:57:38

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 下未做测试。