Snabbdom 源码解析 - 调试 patch 函数

280 阅读2分钟

「这是我参与2022首次更文挑战的第8天,活动详情查看:2022首次更文挑战

调试 patch 函数

对于我这种菜逼新人,直接阅读源码感觉十分的吃力,如果可以一边调试一边对代码进行阅读的话就会轻松很多。ok,那我们先进入简单的调试环节吧!

测试用 Demo

地址: gitee.com/liuyinghao1…

部分代码:

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模块,找到对应的地方进行断点的调试

image.png

刷新页面,然后使用F11进行页面的调试工作了!

因为我们传入的是一个空数组,也就没有对应的钩子函数,所以就没有进入这个循环中,接着往下看 image.png

此时,就进入了如下的判断方法中,这个方法判断我们传入的节点是否是真实DOM,因为我们传入的是一个真实的DOM,所以会进入if语句的判断中。

这里就会执行emptyNodeAt这个方法,这个方法将真实节点转换为虚拟VNode image.png

然后接着我们进入到emptyNodeAt这个方法中 ,进行调试,这个函数内部先判断 id 是否存在 image.png 当id、和类样式都执行完毕之后,就会调用 VNode方法转换

好了大致的调试其实就是这样的。。。

大家有兴趣可以,自己进行测试!