snabbdom源码粗读

svtter 发布于2019-08-22 17:19 / 3115人阅读

摘要：这个大概是的钩子吧在每一次插入操作的时候都将节点这类型方法可以看出来是在调用对应的方法因为开始的时候就导入进来了插入节点操作的时候都需要加入子节点有子元素也就是的时候递归调用循环子节点生成对应着一些操作之后都要触发钩子函数。

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的。

本文写于2017年05月22日

撒花。thanks
如果有需要详细代码解析的朋友可以联系我获取。

一些link

snabbdom源码地址

不错的snabbdom源码解读

本人博客

GPU云服务器云服务器 snabbdom 源码站源码源码网站源码源码商城源码

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/95066.html

snabbdom源码解析（一）准备工作

摘要：阅读源码的时候，想了解虚拟结构的实现，发现在的地方。然而慢慢的人们发现，在我们的代码中布满了一系列操作的代码。源码解析系列源码解析一准备工作源码解析二函数源码解析三对象源码解析四方法源码解析五钩子源码解析六模块源码解析七事件处理个人博客地址前言虚拟 DOM 结构概念随着 react 的诞生而火起来，之后 vue2.0 也加入了虚拟 DOM 的概念。阅读 vue 源码的时候，想了解...

defcon 2019-08-26 13:26 评论0 收藏0
snabbdom源码解析（二） h函数

介绍这里是 typescript 的语法，定义了一系列的重载方法。h 函数主要根据传进来的参数，返回一个 vnode 对象代码代码位置： ./src/h.ts /** * 根据选择器，数据，创建 vnode */ export function h(sel: string): VNode; export function h(sel: string, data: VNodeData...

Jensen 2019-08-26 13:26 评论0 收藏0
snabbdom源码解析（三） vnode对象

摘要：对象是一个对象，用来表示相应的结构代码位置定义类型定义类型选择器数据，主要包括属性样式数据绑定时间等子节点关联的原生节点文本唯一值，为了优化性能定义的类型定义绑定的数据类型属性能直接用访问的属性样式类样式数据绑定的事件钩子创建对象根据传入的 vnode 对象 vnode 是一个对象，用来表示相应的 dom 结构代码位置：./src/vnode.ts 定义 vnode 类型 /** ...

willin 2019-08-26 13:26 评论0 收藏0
snabbdom源码解析（五）钩子

摘要：元素从父节点删除时触发，和略有不同，只影响到被移除节点中最顶层的节点在方法的最后调用，也就是完成后触发源码解析系列源码解析一准备工作源码解析二函数源码解析三对象源码解析四方法源码解析五钩子源码解析六模块源码解析七事件处理个人博客地址文件路径： ./src/hooks.ts 这个文件主要是定义了 Virtual Dom 在实现过程中，在其执行过程中的一系列钩子。方便外部做一些处理 /...

Worktile 2019-08-23 14:18 评论0 收藏0
Snabbdom.js（一）

摘要：闲聊在学的过程中，虚拟应该是听的最多的概念之一，得知其是借鉴进行开发，故习之。以我的观点来看，多个相同元素渲染时，则需要为每个元素添加值。闲聊：在学vue的过程中，虚拟dom应该是听的最多的概念之一，得知其是借鉴snabbdom.js进行开发，故习之。由于我工作处于IE8的环境，对ES6，TS这些知识的练习也只是浅尝辄止，而snabbdom.js从v.0.5.4这个版本后开始使用TS...

mating 2019-08-23 14:15 评论0 收藏0