Virtual DOM到底有什么迷人之处？如何搭建一款迷你版Virtual DOM库？

为什么使用Virtual DOM

手动操作DOM比较麻烦。还需要考虑浏览器兼容性问题，虽然有JQuery等库简化DOM操作，但是随着项目的复杂DOM操作复杂提升。
为了简化DOM的复杂操作于是出现了各种MVVM框架，MVVM框架解决了视图和状态的同步问题
为了简化视图的操作我们可以使用模板引擎，但是模板引擎没有解决跟踪状态变化的问题，于是Virtual DOM出现了
Virtual DOM的好处是当状态改变时不需要立即更新DOM，只需要创建一个虚拟树来描述DOM，Virtual DOM内部将弄清楚如何有效的更新DOM(利用Diff算法实现)。

Virtual DOM的特性

Virtual DOM可以维护程序的状态，跟踪上一次的状态。
通过比较前后两次的状态差异更新真实DOM。

实现一个基础的Virtual DOM库

我们可以仿照snabbdom库https://github.com/snabbdom/snabbdom.git自己动手实现一款迷你版Virtual DOM库。

首先，我们创建一个index.html文件，写一下我们需要展示的内容，内容如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vdom</title>
<style>
.main {
color: #00008b;
}
.main1{
font-weight: bold;
}
</style>
</head>
<body>
<div id="app"></div>
<script src="./vdom.js"></script>
<script>
function render() {
return h('div', {
style: useObjStr({
'color': '#ccc',
'font-size': '20px'
})
}, [
h('div', {}, [h('span', {
onClick: () => {
alert('1');
}
}, '文本'), h('a', {
href: 'https://www.baidu.com',
class: 'main main1'
}, '点击')
]),
])
}
// 页面改变
function render1() {
return h('div', {
style: useStyleStr({
'color': '#ccc',
'font-size': '20px'
})
}, [
h('div', {}, [h('span', {
onClick: () => {
alert('1');
}
}, '文本改变了')
]),
])
}
// 首次加载
mountNode(render, '#app');
// 状态改变
setTimeout(()=>{
mountNode(render1, '#app');
},3000)
</script>
</body>
</html>

我们在body标签内创建了一个id是app的DOM元素，用于被挂载节点。接着我们引入了一个vdom.js文件，这个文件就是我们将要实现的迷你版Virtual DOM库。最后，我们在script标签内定义了一个render方法，返回为一个h方法。调用mountNode方法挂载到id是app的DOM元素上。h方法中数据结构我们是借鉴snabbdom库，第一个参数是标签名，第二个参数是属性，最后一个参数是子节点。还有，你可能会注意到在h方法中我们使用了useStyleStr方法，这个方法主要作用是将style样式转化成页面能识别的结构，实现代码我会在最后给出。

思路理清楚了，展示页面的代码也写完了。下面我们将重点看下vdom.js，如何一步一步地实现它。

第一步

我们看到index.html文件中首先需要调用mountNode方法，所以，我们先在vdom.js文件中定义一个mountNode方法。

// Mount node
function mountNode(render, selector) {
}

接着，我们会看到mountNode方法第一个参数是render方法，render方法返回了h方法，并且看到第一个参数是标签，第二个参数是属性，第三个参数是子节点。

那么，我们接着在vdom.js文件中再定义一个h方法。

function h(tag, props, children) {
return { tag, props, children };
}

还没有结束，我们需要根据传入的三个参数tag、props、children来挂载到页面上。

我们需要这样操作。我们在mountNode方法内封装一个mount方法，将传给mountNode方法的参数经过处理传给mount方法。

// Mount node
function mountNode(render, selector) {
mount(render(), document.querySelector(selector))
}

接着，我们定义一个mount方法。

function mount(vnode, container) {
const el = document.createElement(vnode.tag);
vnode.el = el;
// props
if (vnode.props) {
for (const key in vnode.props) {
if (key.startsWith('on')) {
el.addEventListener(key.slice(2).toLowerCase(), vnode.props[key],{
passive:true
})
} else {
el.setAttribute(key, vnode.props[key]);
}
}
}
if (vnode.children) {
if (typeof vnode.children === "string") {
el.textContent = vnode.children;
} else {
vnode.children.forEach(child => {
mount(child, el);
});
}
}
container.appendChild(el);
}

第一个参数是调用传进来的render方法，它返回的是h方法，而h方返回一个同名参数的对象{ tag, props, children }，那么我们就可以通过vnode.tag、vnode.props、vnode.children取到它们。

我们看到先是判断属性，如果属性字段开头含有，on标识就是代表事件，那么就从属性字段第三位截取，利用addEventListenerAPI创建一个监听事件。否则，直接利用setAttributeAPI设置属性。