成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

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

Jensen / 1480人閱讀

介紹

這里是 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): 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;

    /**
     * 處理參數(shù)
     */
    if (c !== undefined) {
        // 三個參數(shù)的情況  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) {
        // 兩個參數(shù)的情況 : sel , children | text
        // 兩個參數(shù)的情況 : 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是文本或數(shù)字 ，則創(chuàng)建文本節(jié)點
            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 函數(shù)比較簡單，主要是提供一個方便的工具函數(shù)，方便創(chuàng)建 vnode 對象

snabbdom源碼解析系列

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

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

snabbdom源碼解析（三） vnode對象

snabbdom源碼解析（四） patch 方法

snabbdom源碼解析（五） 鉤子

snabbdom源碼解析（六） 模塊

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

個人博客地址

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

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/108831.html

相關(guān)文章

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

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

    defcon 評論0 收藏0

  • snabbdom源碼解析（三） vnode對象

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

    willin 評論0 收藏0

  • snabbdom源碼解析（五） 鉤子

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

    Worktile 評論0 收藏0

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

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

    Kross 評論0 收藏0

  • snabbdom源碼解析（六） 模塊

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

    zone 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<