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