let vnode = {
    sel: 'ul', 
 ? ?data: {},
    children: [ 
        {
            sel: 'li', data: { class: 'item' }, text: 'son1'
        },
        {
            sel: 'li', data: { class: 'item' }, text: 'son2'
        }, ? ?
 ?  ],
 ? ?elm: undefined,
 ? ?key: undefined,
 ? ?text: undefined
}

// vnode.js
export default function (sel, data, children, text, elm) {
    const key = data.key 
    return {sel, data, children, text, elm, key}
}

// 第一個參數(shù)是sel 第二個參數(shù)是data 第三個參數(shù)是children
const myVnode1 = h("h1", {}, [
 ?h("p", {key: "a"}, "a"),
 ?h("p", {key: "b"}, "b"),
]);
const myVnode2 = h("h1", {}, [
 ?h("p", {key: "c"}, "c"),
 ?h("p", {key: "d"}, "d"),
]);

// patch.js
import vnode from "./vnode"
import patchDetails from "./patchVnode"
import createEle from "./createEle"
/**
 * @description 用來對比兩個虛擬dom的根節(jié)點，并根據(jù)對比結果操作真實Dom
 * @param {*} oldVnode 
 * @param {*} newVnode 
 */
export function patch(oldVnode, newVnode) {
 ?// 1.判斷oldVnode是否為虛擬節(jié)點，不是的話轉化為虛擬節(jié)點
 ?if(!oldVnode.sel) {
 ? ?// 轉化為虛擬節(jié)點
 ? ?oldVnode = vnode(oldVnode.tagName.toLowerCase(), {}, [], undefined, oldVnode)
  }
 ?// 2.判斷oldVnode和newVnode是否為同一個節(jié)點
 ?if(oldVnode.key == newVnode.key && oldVnode.sel == newVnode.sel) {
 ? ?console.log('是同一個節(jié)點')
 ? ?// 比較子節(jié)點
 ? ?patchDetails(oldVnode, newVnode)
  }else {
 ? ?console.log('不是同一個節(jié)點')
 ? ?// 插入newVnode 
 ? ?const newNode = createEle(newVnode) // 插入之前需要先將newVnode轉化為dom
 ? ?oldVnode.elm.parentNode.insertBefore(newNode, oldVnode.elm) // 插入操作
 ? ?// 刪除oldVnode
 ? ?oldVnode.elm.parentNode.removeChild(oldVnode.elm)
  }
}
// createEle.js
/**
 * @description 根據(jù)傳入的虛擬Dom生成真實Dom
 * @param {*} vnode 
 * @returns real node
 */
export default function createEle (vnode) {
 ?const realNode = document.createElement(vnode.sel)
?
 ?// 子節(jié)點轉換
 ?if(vnode.text && (vnode.children == undefined || (vnode.children && vnode.children.length == 0)) ) {
 ? ?// 子節(jié)點只含有文本
 ? ?realNode.innerText = vnode.text ?
  }else if(Array.isArray(vnode.children) && vnode.children.length > 0) {
 ? ?// 子節(jié)點為其他虛擬節(jié)點 遞歸添加node
 ? ?for(let i = 0; i < vnode.children.length; i++) {
 ? ? ?const childNode = createEle(vnode.children[i])
 ? ? ?realNode.appendChild(childNode)
 ?  }
  }
 ?// 補充vnode的elm屬性
 ?vnode.elm = realNode
 ?return vnode.elm
}

// patchVnode.js
?
import updateChildren from "./updateChildren"
import createEle from "./createEle"
?
/**
 * @description 比較兩個虛擬節(jié)點的子節(jié)點（children or text） 并更新其子節(jié)點對應的真實dom節(jié)點
 * @param {*} oldVnode 
 * @param {*} newVnode 
 * @returns 
 */
export function patchDetails(oldVnode, newVnode) {
 ?// 判斷oldVnode和newVnode是否為同一個對象, 是的話直接不用比了
 ?if(oldVnode == newVnode) return 
?
 ?// 默認newVnode和oldVnode只有text和children其中之一，真實的源碼這里的情況會更多一些，不過大同小異。
?
 ?if(hasText(newVnode)) {
 ? ?// newVnode有text但沒有children
?
 ? ?/**
 ? ? *  newVnode.text !== oldVnode.text 直接囊括了兩種情況
 ? ? *  1.oldVnode有text無children 但是text和newVnode的text內(nèi)容不同
 ? ? *  2.oldVnode無text有children 此時oldVnode.text為undefined 
 ? ? *  兩種情況都可以通過innerText屬性直接完成dom更新 
 ? ? *  情況1直接更新text 情況2相當于去掉了children后加了新的text
 ? ? */
 ? ?if(newVnode.text !== oldVnode.text) {
 ? ? ?oldVnode.elm.innerText = newVnode.text
 ?  }
  }else if(hasChildren(newVnode)) {
 ? ?// newVnode有children但是沒有text
 ? ?
 ? ?if(hasText(oldVnode)) {
 ? ? ?// oldVnode有text但是沒有children
 ? ? ?
 ? ? ?oldVnode.elm.innerText = '' // 刪除oldVnode的text
 ? ? ?// 添加newVnode的children
 ? ? ?for(let i = 0; i < newVnode.children.length; i++) {
 ? ? ? ?oldVnode.elm.appendChild(createEle(newVnode.children[i]))
 ? ?  }
 ?  }else if(hasChildren(oldVnode)) {
 ? ? ?// oldVnode有children但是沒有text
?
 ? ? ?// 對比兩個節(jié)點的children 并更新對應的真實dom節(jié)點
 ? ? ?updateChildren(oldVnode.children, newVnode.children, oldVnode.elm)
 ?  }
  }
}
// 有children沒有text
function hasChildren(node) {
 ?return !node.text && (node.children && node.children.length > 0)
} 
// 有text沒有children
function hasText(node) {
 ?return node.text && (node.children == undefined || (node.children && node.children.length == 0))
} 

// updateChildren.js
import patchDetails from "./patchVnode"
import createEle from "./createEle";
/**
 * @description 對比子節(jié)點列表并更新真實Dom
 * @param {*} oldCh 舊虛擬Dom子節(jié)點列表 
 * @param {*} newCh 新虛擬Dom子節(jié)點列表 
 * @param {*} parent 新舊虛擬節(jié)點對應的真實Dom
 * @returns 
 */
export default function updateChildren(oldCh, newCh, parent) {
 ?// 定義四個指針 舊前 舊后 新前 新后 （四個指針兩兩一對，每一對前后指針所指向的節(jié)點以及其之間的節(jié)點為未處理的子節(jié)點）
 ?let oldStartIndex = 0;
 ?let oldEndIndex = oldCh.length - 1;
 ?let newStartIndex = 0;
 ?let newEndIndex = newCh.length - 1;
?
 ?// 四個指針對應的節(jié)點
 ?let oldStartNode = oldCh[oldStartIndex];
 ?let oldEndNode = oldCh[oldEndIndex];
 ?let newStartNode = newCh[newStartIndex];
 ?let newEndNode = newCh[newEndIndex];
?
 ?// oldCh中每個子節(jié)點 key 與 index的哈希表 用于四種對比規(guī)則都不匹配的情況下在oldCh中尋找節(jié)點
 ?const keyMap = new Map();
?
 ?/**
 ? * 開始遍歷兩個children數(shù)組進行細節(jié)對比
 ? * 對比規(guī)則：舊前-新前 舊后-新后 舊前-新后 舊后-新前
 ? * 對比之后指針進行移動
 ? * 直到指針不滿足以下條件 意味著有一對前后指針之間再無未處理的子節(jié)點 則停止對比 直接操作DOM
 ? */
 ?while (oldStartIndex <= oldEndIndex && newStartIndex <= newEndIndex) {
 ? ?// 這四種情況是為了讓指針在移動的過程中跳過空節(jié)點
 ? ?if (oldStartNode == undefined) {
 ? ? ?oldStartNode = oldCh[++oldStartIndex];
 ?  } else if (oldEndNode == undefined) {
 ? ? ?oldEndNode = oldCh[--oldEndIndex];
 ?  } else if (newStartNode == undefined) {
 ? ? ?newStartNode = newCh[++newStartIndex];
 ?  } else if (newEndNode == undefined) {
 ? ? ?newEndNode = newCh[--newEndIndex];
 ?  } else if (isSame(oldStartNode, newStartNode)) {
 ? ? ?console.log("method1");
 ? ? ?// 舊前-新前是同一個虛擬節(jié)點
?
 ? ? ?// 兩個子節(jié)點再對比他們的子節(jié)點并更新dom （遞歸切入點）
 ? ? ?patchDetails(oldStartNode, newStartNode);
 ? ? ?// 指針移動
 ? ? ?oldStartNode = oldCh[++oldStartIndex];
 ? ? ?newStartNode = newCh[++newStartIndex];
 ?  } else if (isSame(oldEndNode, newEndNode)) {
 ? ? ?console.log("method2");
 ? ? ?// 舊后-新后是同一個虛擬節(jié)點
?
 ? ? ?// 兩個子節(jié)點再對比他們的子節(jié)點并更新dom （遞歸切入點）
 ? ? ?patchDetails(oldEndNode, newEndNode);
 ? ? ?// 指針移動
 ? ? ?oldEndNode = oldCh[--oldEndIndex];
 ? ? ?newEndNode = newCh[--newEndIndex];
 ?  } else if (isSame(oldStartNode, newEndNode)) {
 ? ? ?console.log("method3");
 ? ? ?// 舊前-新后是同一個虛擬節(jié)點
?
 ? ? ?// 兩個子節(jié)點再對比他們的子節(jié)點并更新dom （遞歸切入點）
 ? ? ?patchDetails(oldStartNode, newEndNode);
?
 ? ? ?/**
 ? ? ? *  這一步多一個移動(真實)節(jié)點的操作
 ? ? ? *  需要把當前指針所指向的子節(jié)點 移動到 oldEndIndex所對應真實節(jié)點之后（也就是未處理真實節(jié)點的尾部）
 ? ? ? *  注意：這一步是在操作真實節(jié)點
 ? ? ? */
 ? ? ?parent.insertBefore(oldStartNode.elm, oldEndNode.elm.nextSibling);
?
 ? ? ?// 指針移動
 ? ? ?oldStartNode = oldCh[++oldStartIndex];
 ? ? ?newEndNode = newCh[--newEndIndex];
 ?  } else if (isSame(oldEndNode, newStartNode)) {
 ? ? ?console.log("method4");
 ? ? ?// 舊后-新前 是同一個虛擬節(jié)點
?
 ? ? ?// 兩個子節(jié)點再對比他們的子節(jié)點并更新dom （遞歸切入點）
 ? ? ?patchDetails(oldEndNode, newStartNode);
 ? ? ?/**
 ? ? ? *  這一步多一個移動(真實)節(jié)點的操作
 ? ? ? *  與method3不同在移動位置
 ? ? ? *  需要把當前指針所指向的子節(jié)點 移動到 oldStartIndex所對應真實節(jié)點之前（也就是未處理真實節(jié)點的頂部）
 ? ? ? *  注意：這一步是在操作真實節(jié)點
 ? ? ? */
 ? ? ?parent.insertBefore(oldEndNode.elm, oldCh[oldStartIndex].elm);
?
 ? ? ?// 指針移動
 ? ? ?oldEndNode = oldCh[--oldEndIndex];
 ? ? ?newStartNode = newCh[++newStartIndex];
 ?  } else {
 ? ? ?console.log("does not match");
 ? ? ?// 四種規(guī)則都不匹配
?
 ? ? ?// 生成keyMap
 ? ? ?if (keyMap.size == 0) {
 ? ? ? ?for (let i = oldStartIndex; i <= oldEndIndex; i++) {
 ? ? ? ? ?if (oldCh[i].key) keyMap.set(oldCh[i].key, i);
 ? ? ?  }
 ? ?  }
?
 ? ? ?// 在oldCh中搜索當前newStartIndex所指向的節(jié)點
 ? ? ?if (keyMap.has(newStartNode.key)) {
 ? ? ? ?// 搜索到了
?
 ? ? ? ?// 先獲取oldCh中該虛擬節(jié)點
 ? ? ? ?const oldMoveNode = oldCh[keyMap.get(newStartNode.key)];
 ? ? ? ?// 兩個子節(jié)點再對比他們的子節(jié)點并更新dom （遞歸切入點）
 ? ? ? ?patchDetails(oldMoveNode, newStartNode);
?
 ? ? ? ?// 移動這個節(jié)點（移動的是真實節(jié)點）
 ? ? ? ?parent.insertBefore(oldMoveNode.elm, oldStartNode.elm);
?
 ? ? ? ?// 該虛擬節(jié)點設置為undefined（還記得最開始的四個條件嗎，因為這里會將子節(jié)點制空，所以加了那四個條件）
 ? ? ? ?oldCh[keyMap.get(newStartNode.key)] = undefined;
 ? ? ? ? ?
 ? ?  } else {
 ? ? ? ?// 沒搜索到 直接插入
 ? ? ? ?parent.insertBefore(createEle(newStartNode), oldStartNode.elm);
 ? ?  }
?
 ? ? ?// 指針移動
 ? ? ?newStartNode = newCh[++newStartIndex];
 ?  }
  }
?
 ?/**
 ? * 插入和刪除節(jié)點
 ? * while結束后 有一對前后指針之間仍然有未處理的子節(jié)點，那么就會進行插入或者刪除操作
 ? * oldCh的雙指針中有未處理的子節(jié)點，進行刪除操作
 ? * newCh的雙指針中有未處理的子節(jié)點，進行插入操作
 ? */
 ?if (oldStartIndex <= oldEndIndex) {
 ? ?// 刪除
 ? ?for (let i = oldStartIndex; i <= oldEndIndex; i++) {
 ? ? ?// 加判斷是因為oldCh[i]有可能為undefined
 ? ? ?if(oldCh[i]) parent.removeChild(oldCh[i].elm);
 ?  }
  } else if (newStartIndex <= newEndIndex) {
 ? ?/**
 ? ? * 插入
 ? ? * 這里需要注意的點是從哪里插入，也就是appendChild的第二個參數(shù)
 ? ? * 應該從oldStartIndex對應的位置插入
 ? ? */
 ? ?for (let i = newStartIndex; i <= newEndIndex; i++) {
 ? ? ?// oldCh[oldStartIndex]存在是從頭部插入
 ? ? ?parent.insertBefore(createEle(newCh[i]), oldCh[oldStartIndex] ? oldCh[oldStartIndex].elm : undefined);
 ?  }
  }
}
?
// 判斷兩個虛擬節(jié)點是否為同一個虛擬節(jié)點
function isSame(a, b) {
 ?return a.sel == b.sel && a.key == b.key;
}