「这是我参与2022首次更文挑战的第4天，活动详情查看：2022首次更文挑战」

h 函数

通过上一章节【Snabbdom 源码解析 - 开篇】介绍的部分之后，我们就要正式进入代码的学习中了！

我们的目标是：摸清楚 h函数如何创建 VNode 的呢？

h.ts

路径： src/package/h.ts

代码概览

import { vnode, VNode, VNodeData } from './vnode'
import * as is from './is'

这个留给我们等会再看，接下来定义了一些类型，这是 TypeScript 方法，接着定义了辅助函数 addNS 这个函数我们稍后就来查看它是什么时候被调用的，最下面定义并导出了 h函数

h函数

我们通过代码结构的简单浏览，可以很明显的看出，这里我们通过函数重载机制，定义了5个h函数，但是有一点我们是需要注意的，虽然这是使用 TS 进行编写的，但是最终还是要被编译成 JS 的，但是 JS 中是不支持函数重载的，那他最终会被编译成什么样呢？

这里我们举一个简单的例子：

我们模拟一下，h函数中的重载做一些简单的判断

function addToZ(x: number): number
function addToZ(x: number, y: number): number
function addToZ(x: number, y?: number, z?: number): number {
    if (y) {
        return x+y
    }
    if (z) {
        return x+z
    }
    return x
}

最终编译

function addToZ(x, y, z) {
    if (y) {
        return x + y;
    }
    if (z) {
        return x + z;
    }
    return x;
}

回到我们的 h函数中，我们查看最后一个 h函数

h函数的参数、返回值

function h (sel: any, b?: any, c?: any): VNode

这里我们可以得知：

sel参数是一个必传的参数，且类型不限（不过和前几个重载的函数比对一下，都是string，我想应该可以直接使用string作为类型吧？）
b（第二个参数）、c（第三个参数）；这两个参数则作为非必传参数
函数的返回值类型为 VNode

到这里我们理解了函数重载之后，就非常好懂了，因为 h函数的核心就是去处理参数，并且调用 vnode函数，并返回之后的值

Snabbdom 源码解析 - h 函数

h 函数

h.ts

h函数

h函数的参数、返回值