Snabbdom的使用

一、初始化工程

①新建文件夹virtual-dom-study

②yarn init -y 生成package.json

③yarn add parcel-bundler 安装打包工具parcel

④package.json文件中加入脚本：

"scripts": {
    "dev": "parcel index.html --open",
    "build": "parcel build index.html"
  },

⑤根目录新建index.html和src文件夹

⑥src文件夹新建01-basicusage.js文件

⑦index.html引入上述所述js文件

 

二、导入snabbdom

github中文介绍地址：https://github.com/coconilu/Blog/issues/152

①安装snabbdom

yarn add snabbdom

②01-basicusage.js写入

import { init, h } from 'snabbdom';

// 1.hello world
// 参数：数组，模块
// 返回值：patch函数，作用对比两个vnode的差异更新到真实DOM
let patch = init([])
// 第一个参数：标签+选择器
// 第二个参数：如果是字符串的话就是标签中的内容
let vnode = h('div', 'Hello World');
let app = document.querySelector("#app");
console.log(app)
// 第一个参数：可以是DOM元素，内部会把DOM元素转换成VNode
// 第二个参数：VNode
// 返回值：VNode
patch(app, vnode);

npm run dev 查看效果：由下图可知，div#app的盒子被替换成了一个无id名，内容为Hello World的div

③在生成一个虚拟dom，用patch去做比较更新

import { init, h } from 'snabbdom';

// 1.hello world
// 参数：数组，模块
// 返回值：patch函数，作用对比两个vnode的差异更新到真实DOM
let patch = init([])
// 第一个参数：标签+选择器
// 第二个参数：如果是字符串的话就是标签中的内容
let vnode = h('div', 'Hello World');
let app = document.querySelector("#app");
console.log(app)
// 第一个参数：可以是DOM元素，内部会把DOM元素转换成VNode
// 第二个参数：VNode
// 返回值：VNode
let oldVnode = patch(app, vnode);

// 假设的时刻
vnode = h('div#dongwenjie', 'Hello dongwenjie')
patch(oldVnode, vnode)

可知被替换成了其他包含内容的dom

 

④新建02-basicusage.js文件，index.html引入此文件，js文件写入：

import { init, h } from 'snabbdom';
let patch = init([])
let vnode = h('div#container', [
  h('h1', "我是h1标签"),
  h('ul', [
    h('li', "哈哈哈")
  ])
]);
let app = document.querySelector("#app");
patch(app, vnode);

⑤2s内渲染h2标签。

/*
 * @Descriptions: 
 * @Version: 
 * @Author: 
 * @Date: 2020-07-21 22:20:46
 * @LastEditors: dongwenjie
 * @LastEditTime: 2020-07-21 22:30:08
 */
import { init, h } from 'snabbdom';
let patch = init([])
let vnode = h('div#container', [
  h('h1', "我是h1标签"),
  h('ul', [
    h('li', "哈哈哈")
  ])
]);
let app = document.querySelector("#app");
patch(app, vnode);

setTimeout(() => {
  var newVnode = h('div#container', [
    h('h2', "我是h2标签"),
  ]);
  patch(vnode, newVnode)
}, 2000);

⑥2s内清空页面

/*
 * @Descriptions: 
 * @Version: 
 * @Author: 
 * @Date: 2020-07-21 22:20:46
 * @LastEditors: dongwenjie
 * @LastEditTime: 2020-07-21 22:33:59
 */
import { init, h } from 'snabbdom';
let patch = init([])
let vnode = h('div#container', [
  h('h1', "我是h1标签"),
  h('ul', [
    h('li', "哈哈哈")
  ])
]);
let app = document.querySelector("#app");
patch(app, vnode);

setTimeout(() => {
  var newVnode = h('div#container', [
    h('h2', "我是h2标签"),
  ]);
  patch(vnode, h('!'))
}, 2000);

 

来源：oschina

链接：https://my.oschina.net/u/4446873/blog/4415074