class Element {constructor(tagName, attrs, children) {this.tagName  = tagName;this.attrs    = attrs || {};this.children = children || [];}render () {//这个函数是用来生成真实DOM的，最后会把return的结果添加到页面中去 }
}

/**
<ul id="list"><li class="a">txt_a</li><li class="a">txt_b</li>
</ul>
**/
//根据上面结构可以用一下方式创建一棵 Virtual Dom Tree
let ul = Element('ul', { id: 'list' }, [Element('li', { class: 'a' }, ['txt_a']),Element('li', { class: 'b' }, ['txt_b'])
]);//ul 就是一棵个Virtual Dom Tree
let ulDom = ul.render();//生成真实Dom
document.body.appendChild(ulDom);//添加到页面中

let patchs = diff(oldTree, newTree);//获取两棵Virtual Dom Tree 差异
patch(ulDom, patchs);//找到对应的真实dom，进行部分渲染

//深度遍历树，将需要做变更操作的取出来
//局部更新 DOM
function patch(node,patchs){//代码略
}// diff 入口，比较新旧两棵树的差异
function diff (oldTree, newTree) {let index   = 0let patches = {} // 记录每个节点差异的补丁dfs(oldTree, newTree, index, patches)return patches;
}
/*** dfs 深度遍历查找节点差异* @param  oldNode - 旧虚拟Dom树* @param  newNode - 新虚拟Dom树* @param  index - 当前所在树的第几层* @param  patches - 记录节点差异*/
function dfs (oldNode, newNode, index, patches){let currentPatch = [];//当前层的差异对比if (!newNode) {//如果节点不存不用处理，listdiff函数会处理被删除的节点}else if (isTxt(oldNode) && isTxt(newNode)) {//isTxt用来判断是否是文本，为了简便这边并没有声明if (newNode !== oldNode) currentPatch.push({ type: "text", content: newNode })//如果发现文本不同，currentPatch会记录一个差异 }else if(oldNode.tagName === newNode.tagName && oldNode.key === newNode.key){//如果发现两个节点一样 则去判断节点是属性是否一样，并记录下来let attrsPatches = diffAttrs(oldNode, newNode)if (attrsPatches) {//有属性差异则把差异记录下来currentPatch.push({ type: "attrs", "attrs": attrsPatches })}// 递归遍历子节点，并对子节点进行diff比较diffChildren(oldNode.children, newNode.children, index, patches)}else{//最后一种情况是，两个节点完全不一样，这样只需要把旧节点之间替换就行//把当前差异记录下来currentPatch.push({ type: "replace", node: newNode})}//如果有差异则记录到当前层去if (currentPatch.length) {if (patches[index]) {patches[index] = patches[index].concat(currentPatch)} else {patches[index] = currentPatch}}
}
//判断两个节点的属性差异
function diffAttrs(oldNode, newNode){let attrsPatches = {};//记录差异let count = 0;//记录差异的条数/**代码略判断两个节点的属性差异的代码就略了，让你们知道这里的代码就是判断两个节点的属性有哪些差异，如果有差异就记录在attrsPatches这个对象中，并把它返回**/if(0 == count){return null;}else {return attrsPatches; }
}
//判断孩子节点
function diffChildren(oldChild, newChild, index, patches){let { changes, list } = listDiff(oldChild, newChild, index, patches);if (changes.length) {//如果有差异则记录到当前层去if (patches[index]) {patches[index] = patches[index].concat(changes);} else {patches[index] = changes;}}// 代码略//遍历当前数组oldChild && oldChild.forEach((item, i) => {// 代码略let node;// 经过判断后node节点是同时存在于oldChild 和 newChild中//则对节点进行递归遍历 相当于 进入下一层 节点，let curIndex；dfs(item, node, curIndex, patches);// 代码略})}//判断oldNodeList, newNodeList 节点的位置差，主要是为了判断哪些节点被移动、删除、新增。
function listDiff(oldNodeList, newNodeList, index){let changes = [];//记录 oldNodeList, newNodeList节点的位置差异，是被移动、删除、新增let list = [];//记录 oldNodeList，newNodeList 同时存在的节点/**具体判断逻辑的代码就略了**/return {changes,list};
}