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

defcon 發(fā)布于2019-08-26 13:26 / 2389人閱讀

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

前言

虛擬 DOM 結構概念隨著 react 的誕生而火起來，之后 vue2.0 也加入了虛擬 DOM 的概念。

閱讀 vue 源碼的時候，想了解虛擬 dom 結構的實現(xiàn)，發(fā)現(xiàn)在 src/core/vdom/patch.js 的地方。作者說 vue 的虛擬 DOM 的算法是基于 snabbdom 進行改造的。

于是 google 一下，發(fā)現(xiàn) snabbdom 實現(xiàn)的十分優(yōu)雅，代碼更易讀。所以決定先去把 snabbdom 的源碼啃了之后，再回過頭來啃 vue 虛擬 DOM 這一塊的實現(xiàn)。

什么是虛擬 DOM 結構（Virtual DOM） 為什么需要 Virtual DOM

在前端刀耕火種的時代，jquery 可謂是一家獨大。然而慢慢的人們發(fā)現(xiàn)，在我們的代碼中布滿了一系列操作 DOM 的代碼。這些代碼難以維護，又容易出錯。而且也難以測試。

所以，react 利用了 Virtual DOM 簡化 dom 操作，讓數(shù)據(jù)與 dom 之間的關系更直觀更簡單。

實現(xiàn) Virtual DOM

Virtual DOM 主要包括以下三個方面：

使用 js 數(shù)據(jù)對象表示 DOM 結構 -> VNode

比較新舊兩棵虛擬 DOM 樹的差異 -> diff

將差異應用到真實的 DOM 樹上 -> patch

下面開始來研究 snabbdom 是如何實現(xiàn)這些方面的

項目路徑： https://github.com/snabbdom/snabbdom

首先看一下整體的目錄結構，源碼主要是在 src 里面，其他的目錄：test 、examples 分別是測試用例以及例子。

這里我們先關注源碼部分

── h.ts   創(chuàng)建vnode的函數(shù)
── 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  初始化函數(shù)
── thunk.ts  分塊
── tovnode.ts   dom元素轉vnode
── vnode.ts  虛擬節(jié)點對象

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 , 主要包含兩個函數(shù)，一個是 修補函數(shù) ， 一個是 h 函數(shù)
export const snabbdomBundle = { patch, h: h as any };
export default snabbdomBundle;

我們可以看到，入口文件主要導出兩個函數(shù) ，

patch函數(shù) ，由 snabbdom.ts 的 init 方法，根據(jù)傳入的 module 來初始化

h函數(shù) ，在 h.ts 里面實現(xiàn)。

看起來 h函數(shù)比 patch 要簡單一些，我們?nèi)タ纯吹降鬃隽诵┦裁础?/p> snabbdom源碼解析系列

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

snabbdom源碼解析（二） h函數(shù)

snabbdom源碼解析（三） vnode對象

snabbdom源碼解析（四） patch 方法

snabbdom源碼解析（五）鉤子

snabbdom源碼解析（六）模塊

snabbdom源碼解析（七）事件處理

個人博客地址

GPU云服務器云服務器準備工作 snabbdom 工作日報 asp源碼 asp源碼工作室

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

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/108832.html

snabbdom源碼解析（二） h函數(shù)

介紹這里是 typescript 的語法，定義了一系列的重載方法。h 函數(shù)主要根據(jù)傳進來的參數(shù)，返回一個 vnode 對象代碼代碼位置： ./src/h.ts /** * 根據(jù)選擇器，數(shù)據(jù) ，創(chuàng)建 vnode */ export function h(sel: string): VNode; export function h(sel: string, data: VNodeData...

Jensen 2019-08-26 13:26 評論0 收藏0
snabbdom源碼解析（五）鉤子

摘要：元素從父節(jié)點刪除時觸發(fā)，和略有不同，只影響到被移除節(jié)點中最頂層的節(jié)點在方法的最后調用，也就是完成后觸發(fā)源碼解析系列源碼解析一準備工作源碼解析二函數(shù)源碼解析三對象源碼解析四方法源碼解析五鉤子源碼解析六模塊源碼解析七事件處理個人博客地址文件路徑： ./src/hooks.ts 這個文件主要是定義了 Virtual Dom 在實現(xiàn)過程中，在其執(zhí)行過程中的一系列鉤子。方便外部做一些處理 /...

Worktile 2019-08-23 14:18 評論0 收藏0
snabbdom源碼解析（三） vnode對象

摘要：對象是一個對象，用來表示相應的結構代碼位置定義類型定義類型選擇器數(shù)據(jù)，主要包括屬性樣式數(shù)據(jù)綁定時間等子節(jié)點關聯(lián)的原生節(jié)點文本唯一值，為了優(yōu)化性能定義的類型定義綁定的數(shù)據(jù)類型屬性能直接用訪問的屬性樣式類樣式數(shù)據(jù)綁定的事件鉤子創(chuàng)建對象根據(jù)傳入的 vnode 對象 vnode 是一個對象，用來表示相應的 dom 結構代碼位置：./src/vnode.ts 定義 vnode 類型 /** ...

willin 2019-08-26 13:26 評論0 收藏0
snabbdom源碼解析（七）事件處理

摘要：這種解決方式也是相當優(yōu)雅，值得學習源碼解析系列源碼解析一準備工作源碼解析二函數(shù)源碼解析三對象源碼解析四方法源碼解析五鉤子源碼解析六模塊源碼解析七事件處理個人博客地址事件處理我們在使用 vue 的時候，相信你一定也會對事件的處理比較感興趣。我們通過 @click 的時候，到底是發(fā)生了什么呢！雖然我們用 @click綁定在模板上，不過事件嚴格綁定在 vnode 上的。 event...

Kross 2019-08-23 14:18 評論0 收藏0
snabbdom源碼解析（六）模塊

摘要：模塊在里面，定義了一系列的模塊，這些模塊定義了相應的鉤子。主要接受兩個參數(shù)，。傳送門事件模塊待續(xù)。。。源碼解析系列源碼解析一準備工作源碼解析二函數(shù)源碼解析三對象源碼解析四方法源碼解析五鉤子源碼解析六模塊源碼解析七事件處理個人博客地址模塊在 ./src/modules 里面，定義了一系列的模塊，這些模塊定義了相應的鉤子。這些鉤子會在 patch 的不同階段觸發(fā)，以完成相應模塊的...

zone 2019-08-23 14:18 評論0 收藏0