手写虚拟DOM中的h函数(简易版)

205 阅读1分钟

手写h函数

import vNode from  './vnode'

export default function h (sel,data,c) {
    //判断参数是否合法
    if(arguments.length !== 3)
        throw new Error('arguments.length Error')
    //如果第三个参数是字符串或者数字
    if(typeof c === 'string' || typeof c === 'number' || c === undefined){
        //返回children属性为空的虚拟DOM
        return vNode(sel,data,undefined,c,undefined)
    }else if(Array.isArray(c)){
        //如果第三个参数是数组
        let children = []
        for (let i = 0; i < c.length; i++) {
            //如果数组中不是h函数
            if(!(typeof c[i] === 'object' && c[i].hasOwnProperty('sel'))){
                //中止程序抛出异常
                throw new Error('not have sel')
            }
            //否则,将h函数生成的虚拟dom存放在父节点的children数组中
            children.push(c[i])
        }
        //返回拥有children属性的虚拟DOM
        return vNode(sel,data,children,undefined,undefined)
    }else if(typeof c === 'object' && c.hasOwnProperty('sel')){
        //如果第三个参数是一个h函数
        //返回children长度为1的虚拟DOM
        return vNode(sel,data,[c],undefined,undefined)
    }else{
        //其他情况抛出异常
        throw new Error('arguments type Error')
    }
}

VNode函数

//用于构造虚拟DOM的函数
export default function VNode (sel,data,children,text,elm) {
     const key = data.key
     return {
         sel,data,children,text,elm,key
     }
}