虚拟DOM 和 diff 算法(一) —— snabbdom 简介、测试环境搭建 和 h 函数的使用
作者:互联网
1. 安装
npm init npm i -S snabbdom
webpack配置虚拟打包路径:
运行git首页的 snabbdom 示例代码:(放到 index.js 中):
index.html 里要放一个 id 为 container 的 div:
将这两个函数先替换成 空函数:
代码运行成功:
重写 index.js:
import { init, classModule, propsModule, styleModule, eventListenersModule, h, } from "snabbdom"; // 创建 patch 函数 const patch = init([classModule, propsModule, styleModule, eventListenersModule]); // 创建虚拟节点 const myVnode1 = h('a', { props: { href: "https://www.baidu.com", target: '_blank' // 新窗口打开超链接 } }, "百度"); console.log(myVnode1); // 让虚拟节点上树 const container = document.getElementById("container"); patch(container, myVnode1);
运行如下:
点击链接可以跳转:
import { init, classModule, propsModule, styleModule, eventListenersModule, h, } from "snabbdom"; // 创建 patch 函数 const patch = init([classModule, propsModule, styleModule, eventListenersModule]); // 创建虚拟节点 const myVnode1 = h('a', { props: { href: "https://www.baidu.com", target: '_blank' // 新窗口打开超链接 } }, "百度"); console.log(myVnode1); const myVnode2 = h('div', { class: { box: true } }, "我是一个盒子"); const myVnode3 = h('ul', [ h('li', '香蕉'), h('li', '火龙果'), h('li', '百香果'), ]) // 让虚拟节点上树 const container = document.getElementById("container"); patch(container, myVnode3);
打印一下 myVnode3:
h 函数非常灵活,嵌套一个子节点时,第二个参数可以不写成数组:
标签:const,DOM,patch,init,container,snabbdom,myVnode1,diff 来源: https://www.cnblogs.com/bulu08042/p/15092621.html