现在vue和React这种前端框架都标榜着自己使用了虚拟DOM技术，实话说，我简单的看了一下这部分的相关文章和源码，虚拟DOM技术其实也不是什么难以理解的东西，虚拟DOM是一种思路，可以按照这个思路去实现一个你自己的虚拟DOM，当然不需要去看React源码或者其他虚拟DOM的实现源码，那些源码非常复杂，但是事实上，如果按照这个思路写一个属于自己的虚拟DOM实现，只需要几十行代码就能搞定。今天写这篇文章，就是打算自己创造一个自己的虚拟DOM。
在此之前，有两个重要概念需要牢记于心：
- 虚拟DOM只是一种表示真实DOM的方法。
- 虚拟DOM改变的时候，我们会得到一个新的虚拟DOM。然后将旧虚拟DOM和新虚拟DOM进行比较，找到哪里不同，然后用最少的代价去在真实DOM中将这些不同的地方进行更新。
好！就是这些，现在就可以进行下一步了，深入虚拟DOM的实现。
用一个对象来表示真实DOM
假设我们想在网页上展示下面这样一段DOM:
<ul class=”list”>
<li>item 1</li>
<li>item 2</li>
</ul>
这个DOM可以用一个JS对象来表示，如果看到这里，请先暂停，思考几分钟，如果是你，会如何用一个JS对象来表示一个任意的DOM节点。
我是这样计划的，用type属性来表示DOM名称，用props属性来表示DOM的属性，用children属性来表示DOM的子节点。如果没有子节点，children属性就是空，如果子节点就是文字，比如上面那个li里面没有子节点只有文字，那么这个对象的children属性就是一个文字，说起来复杂，可以看下面代码，我会用下面的纯JS对象来代表上面所要表达的DOM。
let virtualDOM = {
type:'ul',
props:{
'class':'list'
},
children:[
{
type:'li',
props:{},
children:[
'item 1'
]
},
{
type:'li',
props:{},
children:[
'item 2'
]
}
]
}
写一个虚拟DOM生成函数
如果我要写一个很复杂的DOM，手动转换成虚拟DOM的话实在太麻烦了，所以我要写一个函数，这个函数用来生成一个虚拟DOM。
function h(type,props,...children){
return {type,props,children}
}
这个函数使用到了ES6的新特性，rest参数，简单说明一下就是，在h函数中，除了前两个参数以外，其他所有参数都会被放到一个名为children的数组中。现在有了这个帮助函数，就可以这样来生成一个虚拟DOM了：
h('ul',{'class':'list'},
h('li',{},'item 1'),
h('li',{},'item 2'),
)
怎么样？看起来是不是有点熟悉？没错，React也有这样类似的函数，React的写法是这样：
React.createElement('ul',{'class':'list'},
React.createElement('li', {}, 'item 1'),
React.createElement('li', {}, 'item 2'),
);
其实我们可以像用React.createElement一样来使用h方法
实际操作一下试试
React使用的是JSX语法，那么我们也来用一下JSX语法，最方便的是使用JSFiddle这个在线编辑器。打开这个网站以后，要进行一下设置：
-
在JS那个界面里选择一下编译器：
image.png -
增加一个外部JS，用来显示控制台，将这个js文件加入外部链接：
https://getfirebug.com/firebug-lite-debug.js
image.png
加完以后点击Run按钮。就能看到控制台了。
之后就可以用JSX语法配合我们的h()函数来创建虚拟DOM了。好，写一下代码试试看：
/** @jsx h */
/** 上面这行注释的意思是，告诉JSX编译器，用h函数来替代`React.createElement(…)`函数。*/
function h(type, props, ...children) {
return { type, props, children };
}
const a = (
<ul class="list">
<li>item 1</li>
<li>item 2</li>
</ul>
);
console.log(a);
能在控制台看到，虚拟DOM创建成功了，这很酷吧？
我的代码也放在jsFiddle上面，如果有不清楚的地方可以打开我的代码看看：我的代码地址
现在有了一个创建虚拟DOM的方便函数，下一步就是根据虚拟DOM来生成一个真实DOM了，这个篇幅比较长了，这部分放到下一期吧。
