snabbdom

 snabbdom简介

搭建snabbdom环境

npm init
npm i -S snabbdom

搭建好后出现这样一个文件，sanabbdom里边就有js源码

接着安装webpack命令

npm install --save-dev webpack@5 webpack-cli@3 webpack-dev-server@3 --legacy-peer-deps

直接npm run dev命令

接着去官方网址 GitHub - snabbdom/snabbdom: A virtual DOM library with focus on simplicity, modularity, powerful features and performance.把 Example这个方法给放在src目录下的index.js文件中

至此搭建完成

snabbdom的h函数

什么是虚拟dom

虚拟dom

虚拟节点的属性

一般来说虚拟节点的属性有

{
 children:undefined   //是否有父子节点
 data:{},             //元素样式属性及数据属性都会存在在这里
 elm:undefined,       //与真实dom的节点数
 key:undefined,       //唯一标识
 sel:"div",           //元素
 text:"我是一个盒子"    //文字
}

现在我编写了这样的函数，但是当我打印出来的数据是

手写h函数

snabbodm中diff算法

手写diff算法