现在vue和React这种前端框架都标榜着自己使用了虚拟DOM技术，实话说，我简单的看了一下这部分的相关文章和源码，虚拟DOM技术其实也不是什么难以理解的东西，虚拟DOM是一种思路，可以按照这个思路去实现一个你自己的虚拟DOM，当然不需要去看React源码或者其他虚拟DOM的实现源码，那些源码非常复杂，但是事实上，如果按照这个思路写一个属于自己的虚拟DOM实现，只需要几十行代码就能搞定。今天写这篇文章，就是打算自己创造一个自己的虚拟DOM。

在此之前，有两个重要概念需要牢记于心：

1. 虚拟DOM只是一种表示真实DOM的方法。
2. 虚拟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这个在线编辑器。打开这个网站以后，要进行一下设置：

1. 在JS那个界面里选择一下编译器：

   
   image.png

2. 增加一个外部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了，这个篇幅比较长了，这部分放到下一期吧。