虚拟DOM之Snabbdom的使用

最新推荐文章于 2024-08-12 08:44:10 发布

柳宁依

最新推荐文章于 2024-08-12 08:44:10 发布

阅读量901

点赞数 1

分类专栏： vue

本文链接：https://blog.youkuaiyun.com/weixin_36339245/article/details/107073142

版权

本文介绍了Snabbdom，一个轻量级的虚拟DOM库，包括其核心概念如h()、thunk()和patch()。通过实例展示了如何在div中添加子元素，以及如何注册和使用模块。同时，文章还解析了源码中的关键文件，如h.ts、snabbdom.ts和vnode.ts，并探讨了函数重载在TypeScript中的应用。通过对vnode属性的解析，阐述了Snabbdom如何通过patch()方法进行高效的DOM更新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Snabbdom是一个虚拟DOM库。

parcel是一个打包工具，使用非常简单，0配置。

创建Snabbdom项目结构的基本步骤：

//创建项目目录
md snabbdom-demo
//进入项目
cd snabbdome-demo
//创建package.json
npm init或yarn init -y
//本地安装parcel-bundler
npm install parcel-bundler或yarn add parcel-bundler
//在package.json文件中，script项配置启动命令和打包命令
"script":{
    "dev":"parcel index.html --open",//如果要浏览器自动打开的话就加上--open
    "build":"parcel build index.html"//index.html是入口文件
}

开始写项目的基本步骤：

//安装snabbdom
npm install snabbdom --save或yarn add snabbdom
//注意新版本似乎有问题，引入以后报错，所以安装的时候可以安装0.7版本的
npm install snabbdom@0.7.0

//引入snabbdom
import {h,thunk,init} from "snabbdom";
//注意snabbdom是使用export导出的，所以没办法不写{},而且看源码，它一共导出了三个方法。
//不过使用requie的方式导入的话，可以写成const snabbdom=require("snabbdom"),至于为什么require可以，具体见ES6和CommonJS模块化的差异</

最低0.47元/天解锁文章