双线程前端框架：Voe.js

halo，大家好，我是132，大家好久不贱了哈！

最近上课真的很忙，时间很少的用来写代码了::>_<::，今天主要给大家带来的是一个新框架 voe

看一眼 API，乍一看仿佛和 fard 类似的 API，仿佛又写了个跨端小程序框架？

然而并不是……

voe 是一个底层小程序框架

意思是它实现了小程序的双线程，利用“沙箱” 隔离 web 环境，屏蔽 dom 能力

接下来结合微信小程序介绍一下主要思路：

目标

绝对的控制力，意思是用户不能操作 dom，不能使用 web API，不能使用完整的 jsx 和 html，不能……反正就是啥都不能！

就好像 sm 角色一样，s 对 m 的绝对控制与虐待，m 只能服从命令与受虐

所以我把小程序的双线程架构又称为 【主奴架构】

沙箱

小程序中不能操作 dom，不是因为它屏蔽了 dom API 或者屏蔽了事件，这样做是不切实际的

大家都是寻找一个非 dom 环境作为沙箱，比如 v8，比如 worker，比如 native，比如 wasm

以上都是 OK 的，我猜微信小程序等也是用的类似的沙箱

voe 使用 web worker 作为沙箱

为什么不使用 v8 或 native？

这就是纯粹的个人选择了，不选择 v8 或 native 应该是，但是偏偏我个人更偏前一点，web worker 的计算力默认是优于 v8 或 native 的（同等硬件水平），但是 v8 也有好处，比如 node 可以使用 cookie，然后拥有一些先进的 API

将框架拆到两个不同的线程中

重点来了，两个线程中，如何安排框架工作呢？

有几个原则：

用户逻辑必须跑在 worker 中，完全不让碰主线程
计算力的逻辑尽可能多的放到 worker 中

于是乎，就变成下面这个样子：

然后，困难如约而至，沙箱与主线程之间的鸿沟来自 dom 元素和事件函数，这两者无法传递

我绞尽脑汁，想了一个完全之策

将不能传递的东西保存到自己线程中并建立映射，将索引传到另一个线程

比如，事件是这样传递的：

let handlers = new WeakSet()
  if (props) {
    for (const k in props) {
      if (k[0] === 'o' && k[1] === 'n') {
        let e = props[k]
        let id = handlers.size + 1
        handlers.set({ id: e })
        props[k] = id      
      }
    }
  }

将事件放到 map 中存起来，然后将 id 传给主线程，主线程事件触发的时候，将 id 和 event 参数交还给 worker

for (const k in props) {
    if (k[0] === 'o' && k[1] === 'n') {
      let id = props[k]
      props[k] = event => {
        // 不能传太多，此处省略对事件的简化操作
        worker.postMessage({
          type: EVENT,
          event,
          id
        })
      }
    }
}

然后在 worker 中，根据索引映射，找到对应的事件并触发

是的没错就是这样，这个方法是万能的，比如我们的 diff 方法

既然 diff 无法将 dom 传出去，那么我们就传 dom 的 index

if (oldVNode ==null||oldVNode.type!==newVNode.type) {    
  parent.insertBefore(createNode(newVNode), node)
}

比如这个方法，parent 和 node 都是 dom 元素，是没办法传递的，我们就……传他们的索引，may be 长这样：

[ [0,'insertBefore',1] ]

dom 是这样的：

<div id="root" index="0">
  <ul index="1">
    <li index="2" />
    <li index="3" />
  </ul>
</div>

如果此时我们要删除 index 为 3 的节点，那对应生成的结构，应该是这样：

[ [1,'removeChild',3] ]

刺不刺激，我们成功找到了一个思路，能够实现不同的 diff 算法啦

要知道，微信小程序就没有找到类似的思路，他们的 diff 还是 virtual-dom 的那套古老的深度遍历，代码多性能差……

按照同样的思路，我们还可以在在 worker 中将主线程的函数的参数传到主线程

比如我们模拟一个 alert 方法，就可以这么做：

function alert(text){
  postMessage({
    name:'alert',
    text
  })
}

然后主线程接收参数，并执行

worker.onmessage = {data} => window[data.name](data.text)

如此，完美，这样我们就可以在 worker 中选择性的使用主线程的方法和变量了

综上所述，上面介绍了双线程的主要思路，这些思路不仅仅适用于这个框架，同样适用于其他跨端的场景

vue 3

这里简单说一下 vue 3，嗯大家看到，voe 的名字和 API 神似 vue 3，事实上我确实将 vue 3 的核心抄过来了，包括依赖收集，响应式，状态更新，组合函数……

这只是顺手的事儿，其实比起 voe 的核心思路，API 是没什么所谓的

因为几乎所有的公司，如果想要搞自己的小程序，都只能过来参考思路，然后 API 很可能就和微信保持一致了

所以我觉得 vue 3 的 API 足够简单，正好可以弱化 API

就抄过来了……

大家可以可以将 voe 作为 vue 3 的最小实现，用于协助阅读源码也是很 OK 的哈！

双线程 vs 异步渲染

题外话，大家应该都知道我之前写的框架 fre.js，也应该对 concurrent（时间切片）、suspense 等异步渲染的机制有所了解

如今我又来搞 web worker，是因为它俩的思路是类似的，场景也是一样的

时间切片是利用宏任务，将 diff 等低优先级任务后放到宏任务队列中，从而模拟了双线程，不阻断 UI
双线程是利用 web worker，将 diff 等高计算力的任务放到 worker 中，从而不阻断主线程 UI 渲染

两者的场景同样都是可视化，高帧率动画，大量数据与计算……

可惜本身这种场景需求实在太少了，所以 preact 和 vue 团队纷纷发声，表示不想搞也不需要搞::>_<::

但是到我这来说的话，其实我不在意框架有没有人用，也不在于业务的，我更加倾向于一种技术创新，所以从这个方面，只要是新的思路，总归有它的价值

总结

呼~终于写完了，在掘金发文，必须要长啊

最后放上 voe 的 github：

github.com/132yse/voe

欢迎关注与 star！

另外建立了一个前端群，用于交流各种 new idea：813783512