This is a tiny framework for Web Workers.
- It is possible to write Worker's code in a same file.
- Both Promise and Callback pattern support.
- It is possible to use console.log in Workers (It will help with debugging).
- Fast loading (1.2kb gz).
<!-- install a Promise polyfill for unsupported browser --><scriptsrc="es6-promise.min.js"></script><scriptsrc="workerframe.min.js"></script>Callback pattern:
varworker=newWorkerFrame(function(){// it is executed this code in the worker context >>>self.on('add',function(data){self.message('answer',data[0]+data[1]);});// <<< it is executed this code in the worker context});worker.on('answer',function(data){console.log(data);// => 48});worker.message('add',[16,32]);If transmit a message to worker via type "foo", the worker can receive it via type "foo". And vice versa.
Promise pattern:
varworker=newWorkerFrame(function(){// it is executed this code in the worker context >>>self.on('add',function(data,success,failure){success(data[0]+data[1];});// <<< it is executed this code in the worker context});worker.message('add',[16,32]).then(function(data){console.log(data);// => 48}).catch(function(err){// If the worker returns something error via failure(), this is called.});varfoo='untouchable';// It is unable to access values and objects that are out of this function.// Note that it works in the worker thread.vartask=function(){self.on('calc',function(data){self.message('complete',data.width*data.height);});// This will cause an error! (Because the `foo` is out of this function.)console.log(foo);};varworker=newWorkerFrame(task);worker.message('calc',{width: 640,height: 480});transferList is an optional array of Transferable objects (refer to here).
varoncomplete=worker.on('complete',function(data){console.log('the task has been completed: '+data);});Also it is able to catch errors that occur in a worker as below:
worker.on('error',function(err){console.log(err);});worker.off('complete',oncomplete);The auto off version of worker.on.
varoncomplete=worker.one('complete',function(data){console.log('the task has been completed: '+data);});Close the worker cleanly (not "abort"). If it is also called this method, it is fired close event in the worker before actually closing. You may hook this event for performing finalization.
varworker=newWorkerFrame(function(){self.on('close',function(){console.log('I will be shut down soon!');});});worker.close();The following functions are able to use only in worker context.
varworker=newWorkerFrame(function(){self.message('say','hello');});varworker=newWorkerFrame(function(){self.on('add',function(data){self.message('answer',data[0]+data[1]);});});varworker=newWorkerFrame(function(){self.on('add',function(data,success,failure){success(data[0]+data[1]);});});varworker=newWorkerFrame(function(){varadd=self.on('add',function(data){self.message('answer',data[0]+data[1]);});self.off('add',add);});varworker=newWorkerFrame(function(){self.one('add',function(data){self.message('answer',data[0]+data[1]);});});varworker=newWorkerFrame(function(){console.log('debuggable!!');});If import some scripts via self.importScripts in this framework, they have to be given absolute path. As this framework has the origin property, make the absolute path with using it.
varworker=newWorkerFrame(function(){// succeedself.importScripts(self.origin+'/fetch.js');// => http://example.com/fetch.js// failself.importScripts('fetch.js');});fetch and XMLHttpRequest apis also need absolute path.
varworker=newWorkerFrame(function(){// succeedfetch(self.origin+'/api/v1/foo');// => http://example.com/api/v1/foo// failself.importScripts('/api/v1/foo');});Chrome, Firefox, Safari, Opera, Android 4.4+, iOS 6+, and Internet Explorer 11.
MIT