snabbdom中的h函数

h函数的使用

h函数被用于创建能描述真实DOM的JavaScript对象。

比如我们可以使用h函数来描述下面这样的一条DOM节点：

<a href='http://www.atguigu.com'>尚硅谷</a>

我们可以使用h函数这样表达：

h('a', {props: { href: 'http://www.atguigu.com'}}, '尚硅谷')

最后h函数会的得到一个js对象，其实也就是虚拟DOM，简化过后它大概是这样的：

{
    "sel": "a",
    "data": {
        "href": "http://www.atguigu.com"
    },
    "text": "尚硅谷"
}

h函数是非常灵活的，它可以进行嵌套等一系列操作，表示各种结构的真实DOM，比如它可以描述这样结构的DOM：

<ul>
    <li>苹果</li>
    <li>西瓜</li>
    <li>
    	<div>
            <p>哈哈</p>
            <p>嘻嘻</p>
        </div>
    </li>
    <li>
    	<p>火龙果</p>
    </li>
</ul>

对应的h函数表示就是这样的：

h函数的设计思想

在snabbdom源码中，有一个方法vnode专门用来封装h函数产生的虚拟dom节点，也就是真实dom节点的JavaScript表示，就像上面的一样：

{
    "sel": "a",
    "data": {
        "href": "http://www.atguigu.com"
    },
    "text": "尚硅谷",
    //这里其实还省略了几个参数，分别是 children, elm, key
}

对于我们的h函数，我们的最终目的也是要产生一个这样的vnode对象，为了更清楚地了解h函数的设计思想，我们在这里只考虑参数有3个的情况，分别为：

h('标签', {数据对象}, '文字');	//最后一个参数是文字
h('标签', {数据对象}, []);	//最后一个参数是数组
h('标签', {数据对象}, h());	//最后一个参数是嵌套的h函数

由以上的三种情况存在，那么我们就要先进行情况的判别。

1. 如果是第一种情况，我们就可以直接输出vnode对象；

2. 如果是第二种情况，我们就要遍历最后那个数组中的每一个元素，查看它们是不是h函数对象，如果是h函数对象的数组集合，那么就将他们的返回值push在当前vnode的children属性里。

   这里有两点需要注意：

   一是h函数对象的判断，在这里我们就查看当前参数是否为object类型且对象含有‘sel’属性即可；

   typeof c[i] == 'object' && c[i].hasOwnProperty('sel')
   

   二是我们在循环遍历数组中的h函数时，其实就已经执行了其中的h函数，所以我们在最后直接将其返回值push到当前vnode的children属性里即可。

   children.push(c[i])
   

3. 如果是第三种情况，代表传入的第三个参数h()就是唯一的children，这种情况直接将第三个参数放进children即可。

h函数按照上面的三种情况循环嵌套，就可以得到虚拟dom对象，方便我们后面的操作。

文章参考尚硅谷邵老师教程