尝鲜 workerize 源码

写在前面

最近正好在看web worker相关的东西，今天无意中就看到了github一周最热项目的推送中，有这么一个项目workerize，repo里的文档的描述如下：

Moves a module into a Web Worker, automatically reflecting exported functions as asynchronous proxies.

例子

关于README很简单，包含一个类似hello world的例子就没其他什么了。但是从例子本身可以看出这个库要解决的问题，是想通过模块化的方式编写运行在web worker中的脚本，因为通常情况下，web worker每加载一个脚本文件是需要通过一个符合同源策略的URL的，这样会对服务端发送一个额外的请求。同时对于web worker本身加载的js文件的执行环境，与主线程是隔离的（这也是它在进行复杂运算时不会阻塞主线程的原因），与主线程的通讯靠postMessageapi和onmessage回调事件来通讯，这样我们在编写一些通信代码时，需要同时在两个不同的环境中分别编写发送消息和接受消息的逻辑，比较繁琐，同时这些代码也不能以模块化的形式存在。

如果存在一种方式，我们可以以模块化的方式来编写代码，注入web worker，之后还能通过类似Promsie机制来处理等异步，那便是极好的。

先来看看例子：

import workerize from 'workerize'

let worker1 = workerize(`
    export function add(a, b) {
        let start = Date.now();
        while (Date.now()-start < 500);
        return a + b;
  }

  export default function minus(a, b){
    let start = Date.now();
        while (Date.now()-start < 500);
    return a - b
  }
`)

let worker2 = workerize(function (m) {
  m.add = function (a, b) {
    let start = Date.now()
    while (Date.now() - start < 500);
    return a + b
  }
});

(async () => {
  console.log('1 + 2 = ', await worker1.add(1, 2))
  console.log('3 + 9 = ', await worker2.call('add', [3, 9]))
})()

worker1和worker2是两种不同的使用方式，一种是以字符串的形式声明模块，一种以函数的形式声明模块。但是无论哪种，最后的结果都是一样的，我们可以通过worker实例显示的调用我们想要调用的方法，每个方法的调用结果均是一个Promise，因此它还可以完美的适配async/await语法。

源码

那么问题来了，这种模块的加载机制和调用方式是怎样实现的呢？我在运行demo代码的时候心中也默默想到，我去，看了好几天的web worker原来还能这么玩，所以一定要研究研究它的源码和它的实现原理。

打开源代码才发现其实并没有多少代码，官文文档也通过一句话强调了这一点：

Just 900 bytes of gzipped ES3

所以对其中主要的两点进行简单说明：

• 如何实现按内容模块化加载脚本而不是通过URL
• 如何通过Promise来代理主线程与worker线程的通讯过程

使用Blob动态生成加载脚本资源

let blob = new Blob([code], {
      type: 'application/javascript'
    }),
    url = URL.createObjectURL(blob),
    worker = new Worker(url)

这其实不是什么新鲜的东西，就是将代码的内容转化为Blob对象，之后再通过URL.createObjectURL将Blob对象转化为URL的形式，之后再用worker加载它，仅此而已。但是这里的问题是，这个code是哪里从哪里来的呢？

将加载代码模块化

在加载代码之前，还有重要的一步，就是需要将加载的代码转变为模块，模板本身只对外暴露统一的接口，这样不论对于主线程还是worker线程，就有了统一的约束条件。源码中作者把上一步中的code转化为了类似commonjs的形式，主要涉及的代码有:

let exportsObjName = `__EXPORTS_${Math.random().toString().substring(2)}__`
  if (typeof code === 'function') code = `(${toCode(code)})(${exportsObjName})`
  code = toCjs(code, exportsObjName, exports)
  code += `\n(${toCode(setup)})(self, ${exportsObjName}, {})`

和toCjs方法

function toCjs (code, exportsObjName, exports) {
  exportsObjName = exportsObjName || 'exports'
  exports = exports || {}
  code = code.replace(/^(\s*)export\s+default\s+/m, (s, before) => {
    exports.default = true
    return `${before}${exportsObjName}.default = `
  })
  code = code.replace(/^(\s*)export\s+(function|const|let|var)(\s+)([a-zA-Z$_][a-zA-Z0-9$_]*)/m, (s, before, type, ws, name) => {
    exports[name] = true
    return `${before}${exportsObjName}.${name} = ${type}${ws}${name}`
  })
  return `var ${exportsObjName} = {};\n${code}\n${exportsObjName};`
}

关于toCjs方法，如果你的正则知识比较扎实的话，可以发现，它做了一件事，就是将字符串类型的code中的所有导出方法的声明，使用commonjs的导出语法替换掉(中间会涉及一些具体的语法规则)，如下：

// 如果 exportsObjName 使用默认值 exports, ...代表省略代码
export function foo(){ ... } => exports.foo = function foo(){ ... }
export default ... => exports.default = ...

如果code是函数类型，则首先使用toCode函数将code转化为string类型，之后再将它转化为IIFE的形式，如下

// 如果 exportsObjName 使用默认值 exports, ...代表省略代码
// 传入的code是如下形式：
function( m ){ 
  ... 
}
// 转化为
(function( m ){
  ...
})(exports)

这里的exportsObjName代表模块的名字，默认值是exports(联想commonjs)，不过这里会在一开始就随机生成一个模块名字，生成代码如下：

let exportsObjName = `__EXPORTS_${Math.random().toString().substring(2)}__`

这样只有我们按照约定的语法来编写web worker加载的代码，它便会加载了一个符合同样约定的commonjs模块。

使用 Promise 来做异步代理

经过上面两步，web worker加载到了模块化的代码，但是worker线程与主线程进行通讯则是仍然需要通过postMessage方法和onmessage回调事件来进行，如果无法优雅地处理这里的异步逻辑，那么之前所做的工作其实意义并不大。

workerize针对这里的异步逻辑，设计了一个简单的rpc协议（文档中将这个称作a tiny, purpose-built RPC），先来看一下源码中的setup函数：

function setup (ctx, rpcMethods, callbacks) {
    ctx.addEventListener('message', ({ data }) => {
      // 只捕获满足条件的数据对象
      if (data.type === 'RPC') {
        // 获取数据对象中的 id 属性
        let id = data.id
        if (id != null) {
          // 如果数据对象中存在非空 method 属性，则证明是主线程发送的消息
          if (data.method) {
            // 获取所要调用的方法实例
            let method = rpcMethods[data.method]
            if (method == null) {
              // 如果所调用的方法实例不存在，则发送方法不存在的消息
              ctx.postMessage({ type: 'RPC', id, error: 'NO_SUCH_METHOD' })
            } else {
              // 如果方法存在，则调用它，并将调用结果按不同的类型发送
              Promise.resolve()
                .then(() => method.apply(null, data.params))
                .then(result => { ctx.postMessage({ type: 'RPC', id, result }) })
                .catch(error => { ctx.postMessage({ type: 'RPC', id, error }) })
            }
          // 如果 method 属性为空，则证明是 worker 线程发送的消息
          } else {
            // 获取每个消息所对应的处于pending状态的Promise实例
            let callback = callbacks[id]
            if (callback == null) throw Error(`Unknown callback ${id}`)
            delete callbacks[id]

            // 按消息的类型将Promise转化为resolve状态或reject状态。
            if (data.error) callback.reject(Error(data.error))
            else callback.resolve(data.result)
          }
        }
      }
    })
  }

根据注释我们可以知道，这里的setup函数包含了rpc协议的解析规则，因此主线程和worker线程对会调用该方法来注册安装这个rpc协议，具体的代码如下：

• 主线程: setup(worker, worker.rpcMethods, callbacks)
• worker线程: code += `\n(${toCode(setup)})(self, ${exportsObjName}, {})

这两处代码都是在各自的作用域中，将rpc协议与当前加载的模块绑定起来，只不过主进程所传callbacks是有意义的，而worker则使用一个空对象代替。

注册调用逻辑

在拥有了rpc协议的基础上，只需要实现调用逻辑即可，代码如下：

worker.call = (method, params) => new Promise((resolve, reject) => {
    let id = `rpc${++counter}`
    callbacks[id] = { method, resolve, reject }
    worker.postMessage({ type: 'RPC', id, method, params })
})

这个call方法，每次会将一次方法的调用，转化为一个pending状态的Promise实例，并存在callbacks变量中，同时向worker线程发送一个格式为调用方法数据格式的消息。

for (let i in exports) {
   if (exports.hasOwnProperty(i) && !(i in worker)) {
     worker[i] = (...args) => worker.call(i, args)
   }
}

同时在初始化的过程中，会将主线程加载的模块中的每个方法，都绑定一个快捷方法，其方法名与模块中的函数声明保持一致，内部则使用worker.call来完成调用逻辑。

最后

关于这个库本身，还存在一些可以探讨的问题，比如：

• 是否支持依赖解析机制
• 如果引入外部依赖模块
• 针对消息是否需要按队列进行处理

关于前两点，似乎作者有一个相同的项目，叫做workerize-loader，可以解决，关于第三点，作者在代码中增加了todo，表示实现消息队列机制可能没有必要，因为当前的通讯基于postMessage，本身的结果已经是有序状态的了。

关于源码本身的分析大概就这样了，希望可以抛砖引玉，如有错误，还望指正。