嵌入式 Web workers

前言

虽然worker可以将复杂的运算放入单独线程去运算，不阻塞UI线程，但是，由于worker()的构造函数的参数不能读取本地的文件，只能来自网络，所以当在一个项目里想使用本地的模块函数，是一个很麻烦的过程，官方的方法也没有提供方便的做法。

 

解决方法

将函数转换为blob，然后生成URL对象。

function fn2workerURL(fn) {
  var blob = new Blob([\'(\'+fn.toString()+\')()\'], {type: \'application/javascript\'})
  return URL.createObjectURL(blob)
}

这样就可以直接在调用本地模块文件了。

 

demo

// worker.js
function scope() {
  function timedCount(e) {
    postMessage(e - 0 + 1);
  }

  onmessage = function (oEvent) {
    console.error(\'worker error \', oEvent);

    timedCount(oEvent.data);
  };
}

function fn2workerURL(fn) {
  var blob = new Blob([\'(\' + fn.toString() + \')()\'], {type: \'application/javascript\'});
  return URL.createObjectURL(blob);
}

export default fn2workerURL(scope);

// main.js
...

import workerUrl from \'./worker.js\';

startWorker = () => {
    if (typeof(Worker) !== \'undefined\') {
      if (!w) {
        w = new Worker(workerUrl);
      }

      w.postMessage(\'1\');

      w.onmessage = function (event) {
        console.error(\'worker message: \', event.data);
      };
    } else {
      alert(\'dont support worker\');
    }
};