如何实现一个 Virtual DOM 及源码分析
如何实现一个 Virtual DOM 及源码分析
Virtual DOM算法
web页面有一个对应的DOM树，在传统开发页面时，每次页面需要被更新时，都需要手动操作DOM来进行更新，但是我们知道DOM操作对性能来说是非常不友好的，会影响页面的重排，从而影响页面的性能。因此在React和VUE2.0+引入了虚拟DOM的概念，他们的原理是：把真实的DOM树转换成javascript对象树，也就是虚拟DOM，每次数据需要被更新的时候，它会生成一个新的虚拟DOM，并且和上次生成的虚拟DOM进行对比，对发生变化的数据做批量更新。---（因为操作JS对象会更快，更简单，比操作DOM来说)。
我们知道web页面是由一个个HTML元素嵌套组合而成的，当我们使用javascript来描述这些元素的时候，这些元素可以简单的被表示成纯粹的JSON对象。
比如如下HTML代码：
上面是真实的DOM树结构，我们可以使用javascript中的json对象来表示的话，变成如下：
因此我们可以使用javascript对象表示DOM的信息和结构，当状态变更的时候，重新渲染这个javascript对象的结构，然后可以使用新渲染的对象树去和旧的树去对比，记录两颗树的差异，两颗树的差异就是我们需要对页面真正的DOM操作，然后把他们应用到真正的DOM树上，页面就得到更新。视图的整个结构确实全渲染了，但是最后操作DOM的时候，只变更不同的地方。
因此我们可以总结一下 Virtual DOM算法：
1. 用javascript对象结构来表示DOM树的结构，然后用这个树构建一个真正的DOM树，插入到文档中。
2. 当状态变更的时候，重新构造一颗新的对象树，然后使用新的对象树与旧的对象树进行对比，记录两颗树的差异。
3. 把记录下来的差异用到步骤1所构建的真正的DOM树上。视图就更新了。
算法实现：
2-1 使用javascript对象模拟DOM树。
使用javascript来表示一个DOM节点，有如上JSON的数据，我们只需要记录它的节点类型，属性和子节点即可。
element.js 代码如下：
入口index.js代码如下：
打开页面即可看到效果。
2-2 比较两颗虚拟DOM树的差异及差异的地方进行dom操作
上面的div只会和同一层级的div对比，第二层级的只会和第二层级的对比，这样的算法的复杂度可以达到O(n).
但是在实际代码中，会对新旧两颗树进行一个深度优先的遍历，因此每个节点都会有一个标记。如下图所示：
在遍历的过程中，每次遍历到一个节点就把该节点和新的树进行对比，如果有差异的话就记录到一个对象里面。
现在我们来看下我的目录下 有哪些文件；然后分别对每个文件代码进行解读，看看做了哪些事情，旧的虚拟dom和新的虚拟dom是如何比较的，且是如何更新页面的 如下目录：
目录结构如下：
首先是 index.js文件 页面渲染完成后 变成如下html结构
假如发生改变后，变成如下结构
可以看到 新旧节点页面数据的改变，h1标签从属性 颜色从红色 变为蓝色，p标签的文本发生改变，ul新增了一项元素li。
基本的原理是：先渲染出页面数据出来，生成第一个模板页面，然后使用定时器会生成一个新的页面数据出来，对新旧两颗树进行一个深度优先的遍历，因此每个节点都会有一个标记。
然后调用diff方法对比对象新旧节点遍历进行对比，找出两者的不同的地方存入到一个对象里面去，最后通过patch.js找出对象不同的地方，分别进行dom操作。
index.js代码如下：
执行 var tree = renderTree()方法后，会调用element.js，
1. 依次遍历子节点(从内到外调用)依次为 li, h1, p, ul, li和h1和p有一个文本子节点，因此遍历完成后，count就等于1，
但是遍历ul的时候，因为有一个子节点li，因此 count += 1; 所以调用完成后，ul的count等于2. 因此会对每个element属性添加count属性。对于最外层的container容器就是对每个子节点的依次增加，h1子节点默认为1，循环完成后 +1；因此变为2， p节点默认为1，循环完成后 +1，因此也变为2，ul为2，循环完成后 +1，因此变为3，因此container节点的count=2+2+3 = 7;
element.js部分代码如下：
oldTree数据最终变成如下：
定时器 执行 var newTree = renderTree()后，调用方法步骤还是和第一步一样：
2. 依次遍历子节点(从内到外调用)依次为 li, h1, p, ul, li和h1和p有一个文本子节点，因此遍历完成后，count就等于1，因为有2个子元素li，count都为1，因此ul每次遍历依次在原来的基础上加1，因此遍历完成第一个li时候，ul中的count为2，当遍历完成第二个li的时候，ul的count就为4了。因此ul中的count为4. 对于最外层的container容器就是对每个子元素依次增加。
所以 container节点的count = 2 + 2 + 5 = 9;
newTree数据最终变成如下数据：
var patches = diff(oldTree, newTree);
调用diff方法可以比较新旧两棵树节点的数据，把两颗树的不同节点找出来。(注意，查看diff对比数据的方法，找到不同的节点，可以查看这篇文章diff算法)如下调用代码：
执行deepWalk如下代码：
1. 判断新节点是否为null，如果为null，说明节点被删除掉。
2. 判断新旧节点是否为字符串，如果为字符串说明是文本节点，并且新旧两个文本节点不同的话，存入数组里面去，如下代码：
currentPatch.push({type: patch.TEXT, content: newNode});
patch.TEXT 为 patch.js里面的 TEXT = 3；content属性为新节点。
3. 如果新旧tagName相同的话，并且新旧节点的key相同的话，继续比较新旧节点的属性，如下代码：
diffProps方法的代码如下：
diffProps代码解析如下：
如上代码是 判断旧节点的属性值是否在新节点中找到，如果找不到的话，count++; 把新节点的属性值赋值给 propsPatches 存储起来。
如上代码是 判断新节点的属性是否能在旧节点中找到，如果找不到的话，count++; 把新节点的属性值赋值给 propsPatches 存储起来。
最后如果count 等于0的话，说明所有属性都是相同的话，所以不需要做任何变化。否则的话，返回新增的属性。
如果有 propsPatches 的话，执行如下代码：
因此currentPatch数组里面也有对应的更新的属性，props就是需要更新的属性对象。
继续代码：
如上代码判断子节点是否相同，diffChildren代码如下：
如上代码：var diffs = listDiff(oldChildren, newChildren, 'key'); 新旧节点按照key来比较，目前key为undefined，所以diffs 为如下：
newChildren = diffs.children;
oldChildren数据如下：
接着就是遍历 oldChildren, 第一次遍历时 leftNode 为null，因此 currentNodeIndex = currentNodeIndex + 1 = 0 + 1 = 1; 不是第一次遍历，那么leftNode都为上一次遍历的子节点，因此不是第一次遍历的话，那么 currentNodeIndex = currentNodeIndex + leftNode.count + 1;
然后递归调用 deepWalk(child, newChild, currentNodeIndex, patches); 方法，接着把child赋值给leftNode，leftNode = child;
所以一直递归遍历，最终把不相同的节点 会存储到 currentPatch 数组内。最后执行
把对应的currentPatch 存储到 patches对象内中的对应项，最后就返回 patches对象。
4. 返回到index.js 代码内，把两颗不相同的树节点的提取出来后，需要调用patch.js方法传进；把不相同的节点应用到真正的DOM上.
不相同的节点 patches数据如下：
如下代码调用：
patch(root, patches);
执行patch方法，代码如下：
deepWalk 代码如下：
1. 首次调用patch的方法，root就是container的节点，因此调用deepWalk方法，因此 var currentPatches = patches[0] = undefined,
var len = node.childNodes ? node.childNodes.length : 0; 因此 len = 3; 很明显该子节点的长度为3，因为子节点有 h1, p, 和ul元素；
2. 然后进行for循环，获取该父节点的子节点，因此第一个子节点为 h1 元素，walker.index++; 因此walker.index = 1; 再进行递归 deepWalk(child, walker, patches); 此时子节点为h1, walker.index为1， 因此获取 currentPatches = patches[1]; 获取值，再获取 h1的子节点的长度，len = 1; 然后再for循环，获取child为文本节点，此时 walker.index++; 所以此时walker.index 为2, 在调用deepwalk方法递归，因此再继续获取 currentPatches = patches[2]; 值为undefined，再获取len = 0; 因为文本节点么有子节点，所以for循环跳出，所以判断currentPatches是否有值，因为此时 currentPatches 为undefined，所以递归结束，再返回到 h1元素上来，所以currentPatches = patches[1]; 所以有值，所以调用 applyPatches()方法来更新dom元素。
3. 继续循环 i, 此时i = 1； 获取子节点 child = p元素，walker.index++，此时walker.index = 3, 继续调用 deepWalk方法，获取 var currentPatches = patches[walker.index] = patches[3]的值，var len = 1; 因为p元素下有一个子节点(文本节点)，再进for循环，此时 walker.index++; 因此walker.index = 4; child此时为文本节点，在调用 deepwalk方法的时候，再获取var currentPatches = patches[walker.index] = patches[4]; 再执行len 代码的时候 len = 0;因此跳出for循环，判断 currentPatches是否有值，有值的话，更新对应的DOM元素。
4. 继续循环i = 2; 获取子节点 child = ul元素，walker.index++; 此时walker.index = 5; 在调用deepWalk方法递归，因此再获取 var currentPatches = patches[walker.index] = patches[5]; 然后len = 1, 因为ul元素下有一个li元素，在继续for循环遍历，获取子节点li，此时walker.index++; walker.index = 6; 再递归调用deepwalk方法，再获取var currentPatches = patches[walker.index] = patches[6]; len = 1; 因为li的元素下有一个文本节点，再进行for循环，此时child为文本节点，walker.index++；此时walker.index = 7; 再执行 deepwalk方法，再获取 var currentPatches = patches[walker.index] = patches[7]; 这时候 len = 0了，因此跳出for循环，判断 当前的currentPatches是否有值，没有，就跳出，然后再返回ul元素，获取该自己li的时候，walker.index 等于5，因此var currentPatches = patches[walker.index] = patches[5]; 然后判断 currentPatches是否有值，有值就进行更新DOM元素。
最后就是 applyPatches 方法更新dom元素了，如下代码：
判断类型，替换对应的属性和节点。
最后就是对子节点进行排序的操作，代码如下：
遍历moves，判断moves.type 是等于0还是等于1，等于0的话是删除操作，等于1的话是新增操作。比如现在moves值变成如下：
node节点 就是 'ul'元素，var staticNodeList = utils.toArray(node.childNodes); 把ul的旧子节点li转成Array形式，由于没有属性key，所以直接跳到下面遍历代码来，遍历moves,获取某一项的索引index，判断move.type 等于0 还是等于1， 目前等于1，是新增一项，但是没有key，因此调用move.item.render(); 渲染完后，对staticNodeList数组里面的旧节点的li项从第二项开始插入节点li，然后执行node.insertBefore(insertNode, node.childNodes[index] || null); node就是ul父节点，insertNode节点插入到 node.childNodes[1]的前面。因此把在第二项的前面插入第一项。