snabbdom源碼解析（二） h函數

Jensen 發布于2019-08-26 13:26 / 1404人閱讀

介紹

這里是 typescript 的語法，定義了一系列的重載方法。
h 函數主要根據傳進來的參數，返回一個 vnode 對象

代碼

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

/**
 * 根據選擇器 ，數據 ，創建 vnode
 */
export function h(sel: string): VNode;
export function h(sel: string, data: VNodeData): VNode;
export function h(sel: string, children: VNodeChildren): VNode;
export function h(sel: string, data: VNodeData, children: VNodeChildren): VNode;
export function h(sel: any, b?: any, c?: any): VNode {
    var data: VNodeData = {},
        children: any,
        text: any,
        i: number;

    /**
     * 處理參數
     */
    if (c !== undefined) {
        // 三個參數的情況  sel , data , children | text
        data = b;
        if (is.array(c)) {
            children = c;
        } else if (is.primitive(c)) {
            text = c;
        } else if (c && c.sel) {
            children = [c];
        }
    } else if (b !== undefined) {
        // 兩個參數的情況 : sel , children | text
        // 兩個參數的情況 : sel , data
        if (is.array(b)) {
            children = b;
        } else if (is.primitive(b)) {
            text = b;
        } else if (b && b.sel) {
            children = [b];
        } else {
            data = b;
        }
    }

    if (children !== undefined) {
        for (i = 0; i < children.length; ++i) {
            // 如果children是文本或數字 ，則創建文本節點
            if (is.primitive(children[i]))
                children[i] = vnode(
                    undefined,
                    undefined,
                    undefined,
                    children[i],
                    undefined
                );
        }
    }

    // 處理svg
    if (
        sel[0] === "s" &&
        sel[1] === "v" &&
        sel[2] === "g" &&
        (sel.length === 3 || sel[3] === "." || sel[3] === "#")
    ) {
        // 增加 namespace
        addNS(data, children, sel);
    }
    // 生成 vnoe
    return vnode(sel, data, children, text, undefined);
}
export default h;

其他

h 函數比較簡單，主要是提供一個方便的工具函數，方便創建 vnode 對象

snabbdom源碼解析系列

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

snabbdom源碼解析（二） h函數

snabbdom源碼解析（三） vnode對象

snabbdom源碼解析（四） patch 方法

snabbdom源碼解析（五）鉤子

snabbdom源碼解析（六）模塊

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

個人博客地址

GPU云服務器云服務器 html 解析源碼 snabbdom 源碼解析 php解析字符串函數

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

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

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

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

defcon 2019-08-26 13:26 評論0 收藏0
snabbdom源碼解析（三） vnode對象

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

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

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

Worktile 2019-08-23 14:18 評論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