Snabbdom(虚拟dom-源码)

17 篇文章 0 订阅
16 篇文章 1 订阅

Snabbdom源码解析

  • 如何学习?

    • 宏观了解

    • 带目标看源码

    • 看源码过程要不求甚解

    • 要多进行调试

    • 多参考相关资料

Snabbdom的核心

  • 使用h()函数创建JavaScript对象(VNode)描述真实DOM

  • init()设置模块,创建patch();

  • patch()函数比较新旧两个VNode;

    • 把变化的内容更新到真实DOM树上;

源码地址

https://github.com/snabbdom/snabbdom

src 源码主要文件

┣ .github // 配置文件
 ┣ .vscode // vscode配置
 ┣ build // 打包后的内容
 ┣ examples // 示例文件
 ┣ perf
 ┃ ┣ benchmarks.js
 ┃ ┗ index.html
 ┣ src // 主要目录
 ┃ ┣ helpers
 ┃ ┃ ┗ attachto.ts
 ┃ ┣ modules
 ┃ ┃ ┣ attributes.ts
 ┃ ┃ ┣ class.ts
 ┃ ┃ ┣ dataset.ts
 ┃ ┃ ┣ eventlisteners.ts
 ┃ ┃ ┣ module.ts
 ┃ ┃ ┣ props.ts
 ┃ ┃ ┗ style.ts
 ┃ ┣ h.ts
 ┃ ┣ hooks.ts // 一些钩子函数
 ┃ ┣ htmldomapi.ts // dom一些操作
 ┃ ┣ index.ts
 ┃ ┣ init.ts
 ┃ ┣ is.ts
 ┃ ┣ jsx.ts
 ┃ ┣ thunk.ts
 ┃ ┣ tovnode.ts
 ┃ ┗ vnode.ts
 ┣ test // 测试文件
 ┣ .editorconfig
 ┣ .eslintrc.js
 ┣ .node-version
 ┣ .nvmrc
 ┣ .prettierignore
 ┣ CHANGELOG.md
 ┣ CONTRIBUTING.md
 ┣ LICENSE
 ┣ README.md
 ┣ browserstack-karma.js
 ┣ graphics.svg
 ┣ karma-benchmark-reporter.cjs
 ┣ karma.conf.js
 ┣ package.json
 ┣ readme-title.svg
 ┗ tsconfig.json

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值