snabbdom h函数

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算法。

上一篇:[前端]css的理解 - 了解css


下一篇:ES2020新特性链操作符 '?.'和'??'