「这是我参与2022首次更文挑战的第8天,活动详情查看:2022首次更文挑战」
调试 patch 函数
对于我这种菜逼新人,直接阅读源码感觉十分的吃力,如果可以一边调试一边对代码进行阅读的话就会轻松很多。ok,那我们先进入简单的调试环节吧!
测试用 Demo
部分代码:
import { init } from 'snabbdom/build/package/init'
import { h } from 'snabbdom/build/package/h'
const patch = init([])
// 第一个参数: 标签+ 选择器
// 第二个参数:如果是字符串就是标签中的文本内容
let vnode = h('div#container.cls', 'Hello World')
let app = document.querySelector('#app')
// 第一个参数:旧的VNode,可以是DOM元素
// 第二个参数:新的VNode
// 返回新的 VNode
let oldVnode = patch(app, vnode)
vnode = h('div#container.xxx', 'Hello WorldAAAAAA')
patch(oldVnode, vnode)
开始调试
我们先运行命令:
npm run dev
然后进入页面,我们开启控制台,进入Sources模块,找到对应的地方进行断点的调试
刷新页面,然后使用F11进行页面的调试工作了!
因为我们传入的是一个空数组,也就没有对应的钩子函数,所以就没有进入这个循环中,接着往下看
此时,就进入了如下的判断方法中,这个方法判断我们传入的节点是否是真实DOM,因为我们传入的是一个真实的DOM,所以会进入if语句的判断中。
这里就会执行emptyNodeAt这个方法,这个方法将真实节点转换为虚拟VNode
然后接着我们进入到emptyNodeAt这个方法中 ,进行调试,这个函数内部先判断 id 是否存在
当id、和类样式都执行完毕之后,就会调用 VNode方法转换
好了大致的调试其实就是这样的。。。
大家有兴趣可以,自己进行测试!