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

2024年1月25日 318次阅读来源: chen4342024

媒介

假造 DOM 构造观点跟着 react 的降生而火起来，以后 vue2.0 也加入了假造 DOM 的观点。

浏览 vue 源码的时刻，想相识假造 dom 构造的完成，发如今 src/core/vdom/patch.js 的处所。作者说 vue 的假造 DOM 的算法是基于 snabbdom 举行革新的。

因而 google 一下，发明 snabbdom 完成的非常文雅，代码更易读。所以决议先去把 snabbdom 的源码啃了以后，再回过头来啃 vue 假造 DOM 这一块的完成。

什么是假造 DOM 构造（Virtual DOM）

为何须要 Virtual DOM

在前端刀耕火种的时期，jquery 可谓是一家独大。但是逐步的人们发明，在我们的代码中布满了一系列操纵 DOM 的代码。这些代码难以保护，又轻易失足。而且也难以测试。

所以，react 利用了 Virtual DOM 简化 dom 操纵，让数据与 dom 之间的关联更直观更简朴。

完成 Virtual DOM

Virtual DOM 重要包括以下三个方面：

运用 js 数据对象示意 DOM 构造 -> VNode
比较新旧两棵假造 DOM 树的差别 -> diff
将差别应用到实在的 DOM 树上 -> patch

下面最先来研讨 snabbdom 是怎样完成这些方面的

── h.ts   建立vnode的函数
── helpers
 └── attachto.ts
── hooks.ts  定义钩子
── htmldomapi.ts   操纵dom的一些东西类
── is.ts   推断范例
── modules  模块
 ├── attributes.ts
 ├── class.ts
 ├── dataset.ts
 ├── eventlisteners.ts
 ├── hero.ts
 ├── module.ts
 ├── props.ts
 └── style.ts
── snabbdom.bundle.ts 进口文件
── snabbdom.ts  初始化函数
── thunk.ts  分块
── tovnode.ts   dom元素转vnode
── vnode.ts  假造节点对象

`snabbdom.bundle.ts` 进口文件

我们先从进口文件最先看起

import { init } from './snabbdom';
import { attributesModule } from './modules/attributes'; // for setting attributes on DOM elements
import { classModule } from './modules/class'; // makes it easy to toggle classes
import { propsModule } from './modules/props'; // for setting properties on DOM elements
import { styleModule } from './modules/style'; // handles styling on elements with support for animations
import { eventListenersModule } from './modules/eventlisteners'; // attaches event listeners
import { h } from './h'; // helper function for creating vnodes

// 进口文件

// 初始化，传入须要更新的模块。
var patch = init([
    // Init patch function with choosen modules
    attributesModule,
    classModule,
    propsModule,
    styleModule,
    eventListenersModule
]) as (oldVNode: any, vnode: any) => any;

// 重要导出 snabbdomBundle , 重要包括两个函数，一个是 修补函数 ， 一个是 h 函数
export const snabbdomBundle = { patch, h: h as any };
export default snabbdomBundle;

我们能够看到，进口文件重要导出两个函数，