class 

{"1": [{"type": 0,"node": {"tagName": "h3","props": {"style": "color: green"},"children": ["I am H1"],"count": 1}}]
}

import listDiff from 'list-diff2'
// 每个节点有四种变动
export const REPLACE = 0 // 替换原有节点
export const REORDER = 1 // 调整子节点，包括移动、删除等
export const PROPS = 2 // 修改节点属性
export const TEXT = 3 // 修改节点文本内容export function diff (oldTree, newTree) {// 节点的遍历顺序let index = 0// 在遍历过程中记录节点的差异let patches = {}// 深度优先遍历两棵树deepTraversal(oldTree, newTree, index, patches)// 得到的差异对象返回出去return patches
}function deepTraversal(oldNode, newNode, index, patches) {let currentPatch = []if (newNode === null) { // 如果新节点没有的话直接不用比较了return}if (typeof oldNode === 'string' && typeof newNode === 'string') {// 比较文本节点if (oldNode !== newNode) {currentPatch.push({type: TEXT,content: newNode})}} else if (oldNode.tagName === newNode.tagName && oldNode.key === newNode.key) {// 节点类型相同// 比较节点的属性是否相同let propasPatches = diffProps(oldNode, newNode)if (propasPatches) {currentPatch.push({type: PROPS,props: propsPatches})}// 递归比较子节点是否相同diffChildren(oldNode.children, newNode.children, index, patches, currentPatch)} else {// 节点不一样，直接替换currentPatch.push({ type: REPLACE, node: newNode })}if (currentPatch.length) {// 那个index节点的差异记录下来patches[index] = currentPatch}}// 子数的diff
function diffChildren (oldChildren, newChildren, index, patches, currentPatch) {var diffs = listDiff(oldChildren, newChildren)newChildren = diffs.children// 如果调整子节点，包括移动、删除等的话if (diffs.moves.length) {var reorderPatch = {type: REORDER,moves: diffs.moves}currentPatch.push(reorderPatch)}var leftNode = nullvar currentNodeIndex = indexoldChildren.forEach((child, i) => {var newChild = newChildren[i]// index相加currentNodeIndex = (leftNode && leftNode.count) ? currentNodeIndex + leftNode.count + 1 : currentNodeIndex + 1// 深度遍历，从左树开始deepTraversal(child, newChild, currentNodeIndex, patches)// 从左树开始leftNode = child})
}// 记录属性的差异
function diffProps (oldNode, newNode) {let count = 0 // 声明一个有没没有属性变更的标志const oldProps = oldNode.propsconst newProps = newNode.propsconst propsPatches = {}// 找出不同的属性for (let [key, val] of Object.entries(oldProps)) {// 新的不等于旧的if (newProps[key] !== val) {count++propsPatches[key] = newProps[key]}}// 找出新增的属性for (let [key, val] of Object.entries(newProps)) {if (!oldProps.hasOwnProperty(key)) {count++propsPatches[key] = val}}// 没有新增 也没有不同的属性 直接返回nullif (count === 0) {return null}return propsPatches
}

import {REPLACE, REORDER, PROPS, TEXT} from './diff';export function patch (node, patches) {// 也是从0开始const step = {index: 0}// 深度遍历deepTraversal(node, step, patches)
}// 深度优先遍历dom结构
function deepTraversal(node, step, patches) {// 拿到当前差异对象const currentPatches = patches[step.index]const len = node.childNodes ? node.childNodes.length : 0for (let i = 0; i < len; i++) {const child = node.childNodes[i]step.index++deepTraversal(child, step, patches)}//如果当前节点存在差异if (currentPatches) {// 把差异对象应用到当前节点上applyPatches(node, currentPatches)}
}// 把差异对象应用到当前节点上
function applyPatches(node, currentPatches) {currentPatches.forEach(currentPatch => {switch (currentPatch.type) {// 0: 替换原有节点case REPLACE:var newNode = (typeof currentPatch.node === 'string') ?  document.createTextNode(currentPatch.node) : currentPatch.node.render()node.parentNode.replaceChild(newNode, node)break// 1: 调整子节点，包括移动、删除等case REORDER: moveChildren(node, currentPatch.moves)break// 2: 修改节点属性case PROPS:for (let [key, val] of Object.entries(currentPatch.props)) {if (val === undefined) {node.removeAttribute(key)} else {node.setAttribute(key, value);}}break;// 3：修改节点文本内容case TEXT:if (node.textContent) {node.textContent = currentPatch.content} else {node.nodeValue = currentPatch.content}break;default: throw new Error('Unknow patch type ' + currentPatch.type);}})
}// 调整子节点，包括移动、删除等
function moveChildren (node, moves) {let staticNodelist = Array.from(node.childNodes)const maps = {}staticNodelist.forEach(node => {if (node.nodeType === 1) {const key = node.getAttribute('key')if (key) {maps[key] = node}}})moves.forEach(move => {const index = move.indexif (move.type === 0) { // 变动类型为删除的节点if (staticNodeList[index] === node.childNodes[index]) {node.removeChild(node.childNodes[index]);}staticNodeList.splice(index, 1);} else {let insertNode = maps[move.item.key] ? maps[move.item.key] : (typeof move.item === 'object') ? move.item.render() : document.createTextNode(move.item)staticNodelist.splice(index, 0, insertNode);node.insertBefore(insertNode, node.childNodes[index] || null)}})
}