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

defcon 发布于2019-08-26 13:26 / 2384人阅读

摘要：阅读源码的时候，想了解虚拟结构的实现，发现在的地方。然而慢慢的人们发现，在我们的代码中布满了一系列操作的代码。源码解析系列源码解析一准备工作源码解析二函数源码解析三对象源码解析四方法源码解析五钩子源码解析六模块源码解析七事件处理个人博客地址

前言

虚拟 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 是如何实现这些方面的

项目路径： https://github.com/snabbdom/snabbdom

首先看一下整体的目录结构，源码主要是在 src 里面，其他的目录：test 、examples 分别是测试用例以及例子。

这里我们先关注源码部分

── 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;

我们可以看到，入口文件主要导出两个函数，

patch函数，由 snabbdom.ts 的 init 方法，根据传入的 module 来初始化

h函数，在 h.ts 里面实现。

看起来 h函数比 patch 要简单一些，我们去看看到底做了些什么。

snabbdom源码解析系列

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

snabbdom源码解析（二） h函数

snabbdom源码解析（三） vnode对象

snabbdom源码解析（四） patch 方法

snabbdom源码解析（五）钩子

snabbdom源码解析（六）模块

snabbdom源码解析（七）事件处理

个人博客地址

GPU云服务器云服务器准备工作 snabbdom 工作日报 asp源码 asp源码工作室

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

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

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源码解析（五）钩子

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

Worktile 2019-08-23 14:18 评论0 收藏0
snabbdom源码解析（三） vnode对象

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

willin 2019-08-26 13:26 评论0 收藏0
snabbdom源码解析（七）事件处理

摘要：这种解决方式也是相当优雅，值得学习源码解析系列源码解析一准备工作源码解析二函数源码解析三对象源码解析四方法源码解析五钩子源码解析六模块源码解析七事件处理个人博客地址事件处理我们在使用 vue 的时候，相信你一定也会对事件的处理比较感兴趣。我们通过 @click 的时候，到底是发生了什么呢！虽然我们用 @click绑定在模板上，不过事件严格绑定在 vnode 上的。 event...

Kross 2019-08-23 14:18 评论0 收藏0
snabbdom源码解析（六）模块

摘要：模块在里面，定义了一系列的模块，这些模块定义了相应的钩子。主要接受两个参数，。传送门事件模块待续。。。源码解析系列源码解析一准备工作源码解析二函数源码解析三对象源码解析四方法源码解析五钩子源码解析六模块源码解析七事件处理个人博客地址模块在 ./src/modules 里面，定义了一系列的模块，这些模块定义了相应的钩子。这些钩子会在 patch 的不同阶段触发，以完成相应模块的...

zone 2019-08-23 14:18 评论0 收藏0