vue diff算法与虚拟dom知识整理(5) 手写一个自己的h函数

news2024/12/27 12:19:17

本文的意义在于教会大家如何手写一个h函数

上文中我们简单理解了一下h函数他的作用是构建一个虚拟的dom节点
掌握这个函数还是很有必要的首先你想要写出来还是得去看原版的ts代码

这边我们没必要把太多注意力放在TS上所以我们这边是看ts代码然后仿写js代码

我们在案例的 node_modules 下找到 snabbdom/src/h.ts 打开这个文件
在这里插入图片描述
读h函数你会发现他最后是返回的用了一个 vnode函数

好家伙在这套娃呢
我们打开同目录下的vnode.ts

这个 vnode函数看着就相对简单一些了
在这里插入图片描述
简单说就是接了一些列参数并给这些参数限制了类型
在ts中 sel: string | undefined 的意思就是
接受一个参数代理名定位以为 sel :后的内容代表可以是string字符串类型或者也可以是 undefined 未定义

处理外这些参数之后就把他们转成一个json并返回
所以 h函数最后返回vnode 就是返回一个vnode函数处理好的虚拟节点对象

对象中比较麻烦的是这个 children 因为他存在嵌套的可能就是一个虚拟节点里面可能又套了一个虚拟节点被套的虚拟节点下面可能还有n层这样嵌套的虚拟节点

所以我们看h函数上面这个位置
会循环处理children 一层一层都创建出 vonde节点
在这里插入图片描述
这里 h函数是不涉及递归的就是用循环一层一层往下调

这里我们看到上面有很多的if h函数这个位置就是涉及到 h函数重载
在这里插入图片描述
重载的概念很多后端语言都有 ts也将这种概念带入了前端开发中
就是定义很多一样名字的函数接收的参数类型数量不同调用不同的逻辑函数
如果您不了解可以读一下我的文章
TypeScript方法重载
上文我们演示过
知道了 h函数有非常多的调法
在这里插入图片描述

好那么我们就来试着写一个自己的h函数

我们看到我们一直在写的这个按理在根目录下的src下创建一个文件夹叫 snabbdom

然后在我们刚创建的 snabbdom 下创建一个 h.js
然后我们刚才也看了 h函数返回需要一个vnode函数来处理一下格式
所以在snabbdom下再创建一个 vnode.js
参考代码如下

export default function(sel,data,children,text,elm) {
    let key = data.key?data.key:undefined;
    return {
        sel,
        data,
        key,
        children,
        text,
        elm
    }
}

逻辑非常简单
就是导出了一个函数这个函数接收五个参数
然后先定义一个局部变量叫 key 他的赋值用了一个三元运算符
判断如果 data中有一个key字段那么就用 data里的key给key赋值
如果没有则 key等于key:undefined
然后返回一个对象就是字段名等于字段对应的值学过ES6的朋友会理解

{
    key
}

和

{
    key: key
}

是一个意思

然后我们来写刚刚创建的 h.js 内的代码

然后首先要说明我们这边h函数不处理方法的重载因为重载这个理解了概念谁都可以写出来很麻烦而且他我觉得并不算h函数中很美观的东西
所以我们这样写的函数就必须要传三个参数

然后我们 h.js编写代码如下

//引入我们刚刚写的vnode
import vnode from "./vnode";
//默认导出一个函数
export default function(a,b,c) {
    //确认调用时是否传了三个参数
    if(arguments.length != 3)
      //如果参数不是三个  抛出异常警告
      throw new Errow("对不起，本h函数必须传三个参数 我们是低配版");

    //  判断 如果传入的第三个参数 是  string或者number  表示 形态为 第一种  h(标签。属性，文本)
    if(typeof c == "string"||typeof c == 'number') {
        return vnode(a,b,undefined,c,undefined);
    //如果传的是一个数组  那么 是调的第二种形式  h(标签。属性，数组)
    }else if(Array.isArray(c)) {
        //定义一个children数组  来存一下当前这个节点的子集
        let children = [];
        //循环c这个数组
        for(let i = 0;i < c.length;i++) {
            //判断当前下标是不是一个对象  因为h函数一定会返回一个对象
            if(c[i] instanceof Object) {
                children.push(c[i]);
            }else{
                //如果不是 抛出异常提示
                throw new Errow(`第三个参数的第${(i+1)}项不是一个h函数`);
            }
        }
        //循环结束  表示children收集子集也结束了
        return vnode(a,b,children,undefined,undefined);
    //判断c是否是一个对象  如果是  表示调用了第三种  h(标签。属性，h对象)
    }else if(c instanceof Object) {
        //第三种 说明  他是唯一的子集  我们直接将他的子集放入children就好了
        return vnode(a,b,[c],undefined,undefined);
    //如果以上格式 全部都不符合  排除错误
    }else{
        throw new Errow("对不起，传入的第三个参数格式错误 请认真加粗");
    }
}

因为这个东西比较不太好去叙述所以我就比较努力的写注释希望大家能通过注释来理解了
这个不叫递归是相互嵌套 h函数的思维真的很巧妙没有很复杂的代码但设计思维却人感觉很有趣也很巧妙

然后我们来测试三种情况
我们将 src下的 index.js 代码改写如下

import h from "./snabbdom/h";

const dom1 = h("div",{
  props: {class: "dom"}
},"文本测试");

const dom2 = h("div",{
  props: {class: "dom"}
},[
  h("div",{},"java"),
  h("div",{},"html"),
  h("div",{},[
    h("div",{},"react"),
    h("div",{},"css")
  ])
]);

const dom3 = h("div",{
  props: {class: "dom"}
},h("div",{},"java"));

console.log(dom1);
console.log(dom2);
console.log(dom3);