Snabbdom（虚拟dom）

创建项目
	创建项目目录 snabbdom md snabbdom 初始化package.json npm init 或 yarn init 安装打包工具 npm install parcel-bundler --save-dev 或 yarn add parcel-bundler 配置package.json "scripts": {     "dev":"parcel index.html --open",     "build":"parcel build index.html”, } 目录结构 index.html package.json src 01-basicusage.js
查看文档
	意义： 学习库，先看文档 通过文档了解库； 查看demo，自己尝试； 查看api的使用； 文档 英文 https://github.com/snabbdom/snabbdom 中文 https://github.com/coconilu/Blog/issues/152
安装snabbdom
	npm i snabbdom 或 yarn add snabbdom
导入snabbdom
	import { h, init, thunk } from 'snabbdom'; 错误示例 import snabbdom from 'snabbdom'; 原因查看 Eexport & Import
snabbdom 三个核心方法
	init() 高阶函数，返回patch()函数； h() 返回虚拟节点VNode 示例一 thunk() 一种优化策略，可以在处理不可变数据时使用；
	示例二 显示hello world
	示例三 显示div中嵌入h1标签、p标签
模块
	Snabbdom的核心库并不能处理元素的属性、样式、事件等，可以使用模块
	官方提供的6个模块 attributes 设置DOM元素的属性，使用setAttribute(); 处理布尔类型的属性 props 和attributes模块相似，设置DOM元素的属性element[attr] = value; 不处理布尔类型的属性 class 切换类样式 注意：给元素设置类样式是通过sel选择器 dataset 设置 data-* 的自定义属性 eventlisteners 注册和移除事件 style 设置行内样式， 支持动画 delayed/remove/destroy
	模块的使用步骤 导入需要的模块、 Init()中注册模块 使用h()函数创建VNode的时候，可以把第二个参数设置为对象，其他参数往后移
	源码 https://github.com/SeriousLose/demos/blob/main/C/snabbdom/src/03-modules.js

// 示例一

new Vue({router,store,render:h=>h(App)}).$mount(“#app”);

// 示例二

// 1. hello world

// init函数
// 参数: 数组,模块
// 返回值:patch函数,作用对比两个VNode的差异更新到真实DOM中
let patch = init([]);

// h函数
// 第一个参数 标签+选择器
// 第二个参数 如果是字符串,就是标签中的内容
// 返回值 VNode
let VNode = h('div#container.cls-name','hello SeriousLose');

// 获取app DOM
let app = document.querySelector("#app");

// patch函数
// 第一个参数: 如果是DOM元素,内部会把DOM元素转换成VNode
// 第二个参数: VNode
// 返回值 VNode
let oldVNode = patch(app,VNode);

// 模拟接口获取数据
setTimeout(() => {
  VNode = h('div','hello SeriousLose ,你好 snabbdom');
  oldVNode = patch(oldVNode,VNode);
}, 1000);

// 示例三

import { h, init } from 'snabbdom';

let patch = init([]);
let VNode = h('div#container',[
  h('h1','hello 苦了'),
  h('p','这是个p标签')
])

let app = document.querySelector("#app");

let oldVNode  = patch(app,VNode);

setTimeout(() => {
  // patch(oldVNode,null)
  oldVNode = patch(oldVNode,h('!'))
}, 2000);

// 示例四

import { eventListenersModule, h, init, styleModule } from 'snabbdom';

let patch = init([
  styleModule,
  eventListenersModule,
])

let VNode = h('div', {
  style: {
    backgroundColor: 'red'
  },
  on: { click: eventHandler }
}, [
  h('h1', 'hello 七夕')
])


function eventHandler () {
  console.log('你好,SeriousLose')
}


let app = document.getElementById("app");
let oldVNode = patch(app, VNode);