通过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>
       
       <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之后的效果图

通过snabbdom实现虚拟DOM

猜你喜欢