snabbdom源碼解析（一）準備工作

defcon 發布于2019-08-26 13:26 / 2378人閱讀

摘要：閱讀源碼的時候，想了解虛擬結構的實現，發現在的地方。然而慢慢的人們發現，在我們的代碼中布滿了一系列操作的代碼。源碼解析系列源碼解析一準備工作源碼解析二函數源碼解析三對象源碼解析四方法源碼解析五鉤子源碼解析六模塊源碼解析七事件處理個人博客地址

前言

虛擬 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源碼工作室

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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