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

1401次阅读  |  发布于5年以前

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

Copyright© 2013-2020

All Rights Reserved 京ICP备2023019179号-8