snabbdom h函数_snabbdom h 函数-CSDN博客

本文链接：https://blog.csdn.net/weixin_45737062/article/details/121632785

本文详细介绍了Snabbdom库中的h函数，该函数用于将tokens转换为虚拟节点（vnode）。h函数通过重载处理不同类型的参数，如字符串、数组或对象，并确保它们正确映射到vnode结构。最终，这些vnodes被用来构建虚拟DOM树，并通过patch函数进行更新和渲染。文章还提供了简易版的h函数和vnode函数示例，帮助读者理解其工作原理。

摘要由CSDN通过智能技术生成

snabbdom h函数

h函数到底做了什么？

h函数将我们的tokens(有模板生成的一个数组，可看前面的文章提到的mustache)转为vnode（虚拟节点）。

h函数

了解h函数的源码你会发现，h函数里面是进行了一个重载，他在我们写参数调用h函数进行了判断，从而达到内部值的一一对应，在h函数中我们最后进行了一个return ，此时return调用了vnode函数，将返回一个vnode对象。（虚拟节点）

简易版h函数

import vnode from './vnode'

/**
 * @param {*} sel 选择器
 * @param {*} data 数据
 * @param {*} c 
 * @returns vnode
 */
export default function(sel,data,c){
    if(arguments.length != 3)
        throw new Error('对不起，h函数必须传入3个函数，我们是低配版h函数')
    if(typeof c == 'string' || typeof c == 'number'){
        return vnode(sel,data,undefined,c,undefined)
    }else if(Array.isArray(c)){
        let children = []
        for(let i = 0 ; i <c.length ; i++){
            if(!(typeof c[i] == 'object' && c[i].hasOwnProperty('sel') )){
                throw new Error('传入的数组存在不是h函数的项')
            }
            // 收集children
            children.push(c[i])
        }
        return vnode(sel,data,c,undefined,undefined)
    }else if(typeof c == 'object' && c.hasOwnProperty('sel')){
        return vnode(sel,data,[c],undefined,undefined)
    }else{
        throw new Error('传入的参数不对')
    }
}

vnode函数

我们在vnode函数中进行虚拟节点的返回，依据调用值直接返回一个vnode
简易版代码

// 函数的功能非常简单，就是把传入的5个参数组合成对象返回
export default function(sel,data,children,text,elm){
    return {
        sel , data , children ,text ,elm
    }
}

在经过了h函数处理之后，我们将虚拟节点进行上树（patch函数），此时就可以在页面进行显示。上树及其他操作将会在其他篇章进行书写包括diff算法。