虚拟dom应用

vdom如何应用，核心api是什么

1、介绍snabbdom（开源社区用的多，vue2用的是他）

首先回顾下之前的vdom格式

真实的dom

<body>
　　<ul id="list">
　　　　<li class="item">item 1</li>
　　　　<li class="item">item 2</li>
　　</ul>
</body>

js模拟的dom

{
　　tag: 'ul',
　　attrs: {
　　　　id: 'list'
　　},
　　children:[{
　　　　tag: 'li',
　　　　attrs: { className: 'item' },
　　　　children: ['item 1']
　　},{
　　　　tag: 'li',
　　　　attrs: { className: 'item'},
　　　　children:['item 2']
　　}]
}

用js模拟的体量非常小。

https://github.com/snabbdom/snabbdom

看snabbdom里面的介绍。一个h函数，一个patch函数，就是vdom最主要的api。看h函数传的是什么。

第一个是标签div，标签对应的id #container，标签对应的class，two,classes。

第二个参数是，这个标签绑定了一个事件，函数叫someFn。

第三个是个数组，数组又是h函数，传入标签，属性，文本

第一次渲染是全部渲染到浏览器中，第二次渲染，数据源有所改变，根据改变重新生成一个newVnode，这个时候再patch。这个时候patch的时候，会进行一个对比，这个对比是只找出需要更新的那部分来更新

上面例子的模拟

<!DOCTYPE html>
<html lang="en">
　　<head>
　　　　<meta charset="UTF-8">
　　　　<meta name="viewport" content="width=device-width, initial-scale=1.0">
　　　　<meta http-equiv="X-UA-Compatible" content="ie=edge">
　　　　<title>Document</title>
　　</head>
　　<body>
　　　　<div id="container"></div>
　　　　<button id="btn-change">change</button>

　　　　<!-- 这里版本要一致 -->
　　　　<script src="https://cdn.bootcss.com/snabbdom/0.7.3/snabbdom.js"></script>
　　　　<script src="https://cdn.bootcss.com/snabbdom/0.7.3/snabbdom-class.js"></script>
　　　　<script src="https://cdn.bootcss.com/snabbdom/0.7.3/snabbdom-props.js"></script>
　　　　<script src="https://cdn.bootcss.com/snabbdom/0.7.3/snabbdom-style.js"></script>
　　　　<script src="https://cdn.bootcss.com/snabbdom/0.7.3/snabbdom-eventlisteners.js"></script>
　　　　<script src="https://cdn.bootcss.com/snabbdom/0.7.3/h.js"></script>

　　　　<script>
　　　　　　var snabbdom = window.snabbdom; 

　　　　　　// 定义patch
　　　　　　var patch = snabbdom.init([
　　　　　　　　snabbdom_class,
　　　　　　　　snabbdom_props,
　　　　　　　　snabbdom_style,
　　　　　　　　snabbdom_eventlisteners
　　　　　　])
 
　　　　　　// 定义h
　　　　　　var h = snabbdom.h;
 
　　　　　　var container = document.getElementById('container');
　　　　　　// 生成vnode
　　　　　　var vnode = h('ul#list', {}, [
　　　　　　　　h('li.item', {}, 'item 1'),
　　　　　　　　h('li.item', {}, 'item 2')
　　　　　　])

　　　　　　patch(container, vnode);

　　　　　　//模拟改变
　　　　　　var btnChange = document.getElementById('btn-change');
　　　　　　btnChange.addEventListener('click', function(){
　　　　　　　　var newVnode = h('ul#list', {}, [
　　　　　　　　　　h('li.item', {}, 'item 1'),
　　　　　　　　　　h('li.item', {}, 'item b'),
　　　　　　　　　　h('li.item', {}, 'item 3')
　　　　　　　　]);
　　　　　　　　patch(vnode, newVnode);
　　　　　　})
　　　　</script>
　　</body>
</html>

item1没有渲染，item b, item3闪烁了

2、重做之前的demo

<!DOCTYPE html>
<html lang="en">
<head>
　　<meta charset="UTF-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1.0">
　　<meta http-equiv="X-UA-Compatible" content="ie=edge">
　　<title>Document</title>
</head>
<body>
　　<div id="container"></div>
　　<button id="btn-change">change</button>
 
　　<!-- 这里版本要一致 -->
　　<script src="https://cdn.bootcss.com/snabbdom/0.7.3/snabbdom.js"></script>
　　<script src="https://cdn.bootcss.com/snabbdom/0.7.3/snabbdom-class.js"></script>
　　<script src="https://cdn.bootcss.com/snabbdom/0.7.3/snabbdom-props.js"></script>
　　<script src="https://cdn.bootcss.com/snabbdom/0.7.3/snabbdom-style.js"></script>
　　<script src="https://cdn.bootcss.com/snabbdom/0.7.3/snabbdom-eventlisteners.js"></script>
　　<script src="https://cdn.bootcss.com/snabbdom/0.7.3/h.js"></script>

　　<script>
　　　　var snabbdom = window.snabbdom;

　　　　// 定义patch
　　　　var patch = snabbdom.init([
　　　　　　snabbdom_class,
　　　　　　snabbdom_props,
　　　　　　snabbdom_style,
　　　　　　snabbdom_eventlisteners
　　　　])
 
　　　　// 定义h
　　　　var h = snabbdom.h;

　　　　// 将该数据展示成一个表格。然后随便修改一个信息，表格也跟着修改
　　　　var data = [{
　　　　　　name: '张三',
　　　　　　age: '20',
　　　　　　address: '北京'
　　　　},{
　　　　　　name: '李四',
　　　　　　age: '21',
　　　　　　address: '上海'
　　　　},{
　　　　　　name: '王五',
　　　　　　age: '22',
　　　　　　address: '广州'
　　　　}];
 
　　　　data.unshift({
　　　　　　name: '姓名',
　　　　　　age: '年龄',
　　　　　　address: '地址'
　　　　});

　　　　var container = document.getElementById('container');
　　　　var btnChange = document.getElementById('btn-change');
 
　　　　// 渲染函数
　　　　var vnode;
　　　　function render(data) {
　　　　　　var newVnode = h('table',{}, data.map(function(item){
　　　　　　　　var tds = [];
　　　　　　　　for (i in item){
　　　　　　　　　　if(item.hasOwnProperty(i)){
　　　　　　　　　　　　tds.push(h('td', {}, item[i]+''))
　　　　　　　　　　}
　　　　　　　　}
　　　　　　　　return h('tr',{}, tds);
　　　　　　}));

　　　　　　if (vnode) {
　　　　　　　　// re-render
　　　　　　　　patch(vnode, newVnode);
　　　　　　} else {
　　　　　　　　// 初次渲染
　　　　　　　　patch(container, newVnode);
　　　　　　}

　　　　　　vnode = newVnode;
　　　　}
　　　　render(data);

　　　　btnChange.addEventListener('click', function(){
　　　　　　data[1].age = 30;
　　　　　　data[2].address = '深圳';
　　　　　　// re-render
　　　　　　render(data);
　　　　})
　　</script>
</body>
</html>