snabbdom
本文的snabbdom源码分析采用的是0.54版本（即未用ts重写前的最后一版）
前期了解
snabbdom被用作vue的虚拟dom。本文的一个目的就是对于进入vue源码预备。 本文大致讲解，而不会完全细化至代码行数讲解
文件(以下只指出需要阅读的主要文件)
- modules
- helper
- h.js
- htmldomapi.js
- is.js
- snabbdom.js
- thunk.js
- vnode.js
vnode.js
说白了就是返回一个数据表示dom结构的数据对象
h.js
则是对多重有子结构 text节点之类的数据对象进行在再处理 返回一个解析好的vnode
htmltoapi
一些dom操作的api封装 结合到后面做vnode渲染到真实dom的操作 is.js 两个工具函数 一个是是否为数组 一个是是否为基本类型 也就是数字string这些文本节点
modules
里面放的则是一些对应的数据结构上例如property attribute之类的辅助操作
- attributes
里面用来更新节点的属性 基本的套路都是一个for in迭代 然后内部判断patch 判断是否需要更新亦或者是删除 如果存在属性的话 且不同肯定是更新 如果新有了 旧的没有就增加 新没有了旧还有 对于一些属性直接设置false 或者是赋空即可
- class.js
这里也是一些利用classList做快速增加修改删除节点上的class的操作 基本简单的判断就是这种套路
- datatset
设置节点属性值
- eventlistener
看源码可以发现 事件绑定这一步传入的参数实际上是被包装的 利用函数封装了一层handleevent handleevent里面实际上是触发invokeHandler 那么从源码可以看出 实际上触发dom节点的绑定事件实际上是在触发 绑定在上下文为vnode的触发器上。 props设置节点这个props是需要键值对的。一般自定义属性值在这里声明好一些，设置checked selected因为内部有一个booleanarray 其实有绑定的话只是做 property能够从attribute中得到同步； attribute不会同步property上的值；
style.js
模拟动画帧 用requestAnimationFrame不兼容则用setTimeout requestAnimationFrame的好处是它的刷新频率会与浏览器一致 setTimeout则有时候可能出现丢失的情况 内部封装一个两层的调用来使用，大概是两帧的意思 如果没有delayed或者remove直接更新style即可 设置节点被destory时候的style 设置删除效果也就是调用自定义的remove钩子函数。如果没有的话就调用全局的 这些定义都是根据api阅读结合源码发现的 remove钩子执行后才会删除样式
snabbdom
这块是在网上看的源码解读 因为diff算法应该是一个vitrual dom实现的重点了 createKeyToOldIdx 给旧节点设置key用于比对 // create => style,class,dataset,eventlistener,props,hero // update => style,class,dataset,eventlistener,props,hero // remove => style // destory => eventlistener,style,hero // pre => hero // post => hero 这是一些钩子函数的使用api吧 init做一些模块的初始化 还有全局钩子的初始化
emptyNodeAt
传入一个节点 然后对这个节点进行操作提取 转换成vnode数据对象
createRmCb
// remove拦截器 style里面提及的 // 对remove钩子回调做减法然后才删除节点
createElm
vnode映射真实节点 看到这里的时候对insertedVnodeQueue很不懂 究竟要干嘛 然后突然想明白了。这个大概是inserted的钩子吧- - 在每一次插入操作的时候都将节点insert api.这类型方法可以看出来是在调用对应modules的方法 因为开始的时候就导入进来了 插入节点操作的时候都需要加入insertedVnodeQueue 子节点有子元素 也就是children的时候递归调用循环子节点生成tree 对应着一些操作之后都要触发钩子函数。 以前并不清楚钩子函数生命周期触发原理，这次倒是见识了 invokeDestroyHook 手动触发destroy钩子 先触发vnode的钩子 在触发全局钩子 再递归触发子节点的钩子 removeVnodes remove操作 因为要使得remove钩子触发后才删除节点 updateChildren patchVnode 最主要的diff算法 利用前后索引的方式 进行对两树的遍历patch 复杂度是O(n) 因为比较都是在同层做比较对比patch 起点在patchVnode 然后patch过程updateChildren 然后调用updateChildrens 一个分段的伪递归 而当索引不生效 这个时候则采用传统的key-index比对 网上的一些simple vitrual dom教程 实现的是基于深度遍历做list diff 然后取得节点的变化 在做对应操作 。 snabbdom的patch等等 都是基于数据对象做的。 而一些vitrual的实现是基于树的patch
总结
virtual-dom的一个好处就是让我们可以从繁杂无章的dom操作中解脱，利用js对象的形式映射到dom，从而操作js数据操作dom 所谓的性能其实还是得看你怎么用，大片的修改dom不见得virtual dom就有多好用。 打算也实现个simple dom 占坑~~（当然在path diff算法上可能不存在优化了）（占坑占坑） snabbdom也是vue使用的virtual dom 库，emmm之后可以看看vue是怎么结合使用snabbdom的。 撒花。thanks