snabbdom源碼解析（三） vnode對象

willin 發布于2019-08-26 13:26 / 1060人閱讀

摘要：對象是一個對象，用來表示相應的結構代碼位置定義類型定義類型選擇器數據，主要包括屬性樣式數據綁定時間等子節點關聯的原生節點文本唯一值，為了優化性能定義的類型定義綁定的數據類型屬性能直接用訪問的屬性樣式類樣式數據綁定的事件鉤子創建對象根據傳入的

vnode 對象

vnode 是一個對象，用來表示相應的 dom 結構

代碼位置：./src/vnode.ts

定義 vnode 類型

/**
 * 定義VNode類型
 */
export interface VNode {
    // 選擇器
    sel: string | undefined;
    // 數據，主要包括屬性、樣式、數據、綁定時間等
    data: VNodeData | undefined;
    // 子節點
    children: Array | undefined;
    // 關聯的原生節點
    elm: Node | undefined;
    // 文本
    text: string | undefined;
    // key , 唯一值，為了優化性能
    key: Key | undefined;
}

定義 VNodeData 的類型

/**
 * 定義VNode 綁定的數據類型
 */
export interface VNodeData {
    // 屬性 能直接用 . 訪問的
    props?: Props;
    // 屬性
    attrs?: Attrs;
    // 樣式類
    class?: Classes;
    // 樣式
    style?: VNodeStyle;
    // 數據
    dataset?: Dataset;
    // 綁定的事件
    on?: On;

    hero?: Hero;
    attachData?: AttachData;
    // 鉤子
    hook?: Hooks;
    key?: Key;
    ns?: string; // for SVGs
    fn?: () => VNode; // for thunks
    args?: Array; // for thunks
    [key: string]: any; // for any other 3rd party module
}

創建 VNode 對象

// 根據傳入的 屬性 ，返回一個 vnode 對象
export function vnode(
    sel: string | undefined,
    data: any | undefined,
    children: Array | undefined,
    text: string | undefined,
    elm: Element | Text | undefined
): VNode {
    let key = data === undefined ? undefined : data.key;
    return {
        sel: sel,
        data: data,
        children: children,
        text: text,
        elm: elm,
        key: key
    };
}
export default vnode;

snabbdom源碼解析系列

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

snabbdom源碼解析（二） h函數

snabbdom源碼解析（三） vnode對象

snabbdom源碼解析（四） patch 方法

snabbdom源碼解析（五）鉤子

snabbdom源碼解析（六）模塊

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

個人博客地址

GPU云服務器云服務器第三域名解析平臺 VNode snabbdom js解析三層json數據

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

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/108830.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源碼解析（一）準備工作

摘要：閱讀源碼的時候，想了解虛擬結構的實現，發現在的地方。然而慢慢的人們發現，在我們的代碼中布滿了一系列操作的代碼。源碼解析系列源碼解析一準備工作源碼解析二函數源碼解析三對象源碼解析四方法源碼解析五鉤子源碼解析六模塊源碼解析七事件處理個人博客地址前言虛擬 DOM 結構概念隨著 react 的誕生而火起來，之后 vue2.0 也加入了虛擬 DOM 的概念。閱讀 vue 源碼的時候，想了解...

defcon 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
snabbdom源碼解析（四） patch 方法

摘要：就近復用為了盡可能不發生的移動，會就近復用相同的節點，復用的依據是判斷是否是同類型的元素方法在中，主要是方法。例如元素的之類的詳細了解請查看模塊模塊判斷是否是相同的虛擬節點判斷是否是相同的虛擬節點方法最后返回一個方法。 patch 方法前言在開始解析這塊源碼的時候，先給大家補一個知識點。關于兩顆 Virtual Dom 樹對比的策略 diff 策略同級對比showImg(ht...

huhud 2019-08-26 13:26 評論0 收藏0