通过snabbdom实现虚拟DOM
在前端页面中，我们都知道渲染DOM节点的代价是最大的，所以有了虚拟DOM大放异彩的机会，
js原生或者是Jquery框架时代，都是直接操作DOM节点来进行渲染页面，可是这样的代价确实是很大，需要将原本的DOM全部清除，然后在重新渲染一遍
github上面可以去看snabbdom的源码 https://github.com/snabbdom/snabbdom
上面也给出了案列，怎么去实现虚拟dom的应用
下面通过使用snabbdom来实现虚拟DOM，vue2.0中的虚拟dom就是通过snabbdom实现的
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--首先要应用snabbdom的js 要不然下面使用的参数 方法是获取不到的-->
<script src="https://cdn.bootcss.com/snabbdom/0.7.1/snabbdom.js"></script>
<script src="https://cdn.bootcss.com/snabbdom/0.7.1/snabbdom-class.js"></script>
<script src="https://cdn.bootcss.com/snabbdom/0.7.1/snabbdom-props.js"></script>
<script src="https://cdn.bootcss.com/snabbdom/0.7.1/snabbdom-style.js"></script>
<script src="https://cdn.bootcss.com/snabbdom/0.7.1/snabbdom-eventlisteners.js"></script>
<script src="https://cdn.bootcss.com/snabbdom/0.7.1/h.js"></script>
</head>
<body>
<div id="container">
</div>
<button id='c_button'>change</button>
<script type="text/javascript">
var snabbdom = window.snabbdom;
//定义patch函数 实现dom节点更新的核心方法
var patch = snabbdom.init([
snabbdom_class,
snabbdom_props,
snabbdom_style,
snabbdom_eventlisteners
]);
var h = snabbdom.h; //定义h函数
var container = document.getElementById('container'); //获取页面原始的DOM节点
// 新建一个虚拟dom 通过h函数建立虚拟dom的
var vnode = h('ul#list',{},[
h('ul.item',{},'item1'),
h('ul.item',{},'item2')
]);
patch(container,vnode); //第一次渲染，vnode去替换container节点内容
document.getElementById('c_button').addEventListener('click',function(){
var newNode = h('ul#list',{},[
h('ul.item',{},'item1'),
h('ul.item',{},'itemC'),
h('ul.item',{},'itemB')
]);
patch(vnode,newNode); //新的虚拟dom 替换之前的dom元素，只会修改发生变化的dom
})
</script>
</body>
</html>
vnode的页面效果图
替换成newNode之后的效果图