snabbdom源码解析（二） h函数

Jensen 发布于2019-08-26 13:26 / 1403人阅读

介绍

这里是 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源码解析（七）事件处理

个人博客地址

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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