双线程前端框架：Voe.js
看一眼 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 的那套古老的深度遍历，代码多性能差……
综上所述，上面介绍了双线程的主要思路，这些思路不仅仅适用于这个框架，同样适用于其他跨端的场景
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
作者：132
链接：https://juejin.im/post/5dd1edf3e51d4561ea3fb3cd
