ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

snabbdom h函数

2021-11-30 15:04:16  阅读:159  来源: 互联网

标签: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. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有