标签:return 函数 vnode snabbdom sel data undefined
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算法。
标签:return,函数,vnode,snabbdom,sel,data,undefined 来源: https://blog.csdn.net/weixin_45737062/article/details/121632785
本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享; 2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关; 3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关; 4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除; 5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。