JavaScript高级面试题（4）

主要讲述虚拟DOM（virtual dom）

0.课程内容

vdom是什么？为何会存在vdom？
vdom的如何应用？核心API是什么？
介绍一下diff算法

1.什么是vdom

virtual dom，虚拟DOM
用JS模拟DOM结构
DOM变化的对比，放在JS层来做
提高重绘性能

什么是vdom，为何使用vdom

1.什么是vdom：

virtual dom，虚拟DOM
用JS模拟DOM结构
DOM变化的对比，放在JS层来做
提高重绘性能

普通DOM操作，看一个例子：

<ul id='list'>
	<li></li>
	<li></li>
</ul>

JS模拟DOM结构

如果item2删掉，如果不用虚拟DOm操作的话，可能要删掉ul和两个li，如果使用虚拟DOm，重新生成一个虚拟DOM文件，比对变化，改变原始的虚拟DOM文件。

2.设计一个需求场景

3.用jQuery实现

用Jquery实现：

//渲染函数
function render(data){

}

//修改信息
$('#btn-change').click(function(){
	data[1].age=30
	data[2].address = '深圳'
	render(data)
})

//初始化时候渲染
render(data)

render实现：

4.遇到的问题

DOM操作是昂贵的，JS运行效率高
尽量减少DOM操作，而不是推倒重来
项目越复杂，影响就越严重
vdom即可解决这个问题

2.使用vdom-snabbdom

推荐snabbdom两个教程：

https://www.jianshu.com/p/1f1ef915e83e
https://segmentfault.com/a/1190000017494569
https://segmentfault.com/a/1190000009017324

vdom是一个一类技术实现，snabbdom是实现vdom的一个库。

snabbdom，一个开源的vdom库，真实dom节点具有很多属性，而vdom具有几个attrs，属性减少了，体量非常小。

snabbdom主要API（h和patch函数）：

h（模拟dom节点）
pacth（container，vnode）//container是真实DOM节点，vnode是虚拟对象
patch（vnode，newVnode） //
是snabbdom主要的API

h函数生成的vnode：

snabbdom源码解析

如果要我们自己实现一个虚拟dom，大概过程应该有一下三步：
1.compile，如何把真实DOM编译成vnode。
2.diff，我们要如何知道oldVnode和newVnode之间有什么变化。
3.patch， 如果把这些变化用打补丁的方式更新到真实dom上去。

1.snabbdom.js结构总览

src
├── helpers     
│   └── attachto.ts # 定义了AttachData，VNodeDataWithAttach ，VNodeWithAttachData 等数据结构
├── modules # 该文件夹中主要存放一些在更新dom差异的时候需要的操作     
│   ├── attributes.ts # 在vnode更新的时候，更新dom中的attrs操作。
│   ├── class.ts  # 在vnode更新的时候，更新dom中的class操作。
│   ├── dataset.ts # 在vnode更新的时候，更新dom中的dataset(自定义数据集)操作。
│   ├── eventlisteners.ts  # 在vnode更新的时候，更新dom中的eventlisteners(自定义数据集)操作。
│   ├── hero.ts # 在vnode更新的时候，和动画效果有关的支持
│   ├── module.ts # 定义的module结构
│   ├── props.ts # 在vnode更新的时候，更新dom中的props操作。
│   └── style.js # 在vnode更新的时候，更新dom中的style操作。
├── h.ts   # 帮助函数主要用来操作生成vnode的。
├── hooks.ts   # 定义snabbdom在运行的过程中hooks的模型。    
├── htmldomapi.ts # 对浏览器的dom的api进行二次包装，可以直接操作，html的dom的api。
├── is.ts # is函数主要是针对做一些数据类型判断，分 primitive和array类型。 
├── snabbdom.bundle.ts # snabbdom.ts、attributes、class、props、style 、eventListenersModule和h组成了这个ts文件。
├── snabbdom.ts # 主要文件，程序的主线逻辑都在这个文件里。
├── thunk.ts # thunk这个文件不知道干什么的，但是不影响理解主线逻辑。   
├── tovnode.ts   # 提供了toVNode的方法，把真实dom转化为vnode。
└── vnode.ts # 定义了vnode的模型和转化成为vnode的工具方法。 

从上面的代码结构，我们可以看到关于snabbdom.js中最主要的代码几个文件是h.ts，snabbdom.ts，tovnode.ts，vnode.ts。

vnode.ts：vnode是对DOM节点的抽象<