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}
}

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

// patchVnode.js
?
import updateChildren from "./updateChildren"
import createEle from "./createEle"
?
/**
 * @description 比較兩個(gè)虛擬節(jié)點(diǎn)的子節(jié)點(diǎn)（children or text） 并更新其子節(jié)點(diǎn)對(duì)應(yīng)的真實(shí)dom節(jié)點(diǎn)
 * @param {*} oldVnode 
 * @param {*} newVnode 
 * @returns 
 */
export function patchDetails(oldVnode, newVnode) {
 ?// 判斷oldVnode和newVnode是否為同一個(gè)對(duì)象, 是的話直接不用比了
 ?if(oldVnode == newVnode) return 
?
 ?// 默認(rèn)newVnode和oldVnode只有text和children其中之一，真實(shí)的源碼這里的情況會(huì)更多一些，不過大同小異。
?
 ?if(hasText(newVnode)) {
 ? ?// newVnode有text但沒有children
?
 ? ?/**
 ? ? *  newVnode.text !== oldVnode.text 直接囊括了兩種情況
 ? ? *  1.oldVnode有text無children 但是text和newVnode的text內(nèi)容不同
 ? ? *  2.oldVnode無text有children 此時(shí)oldVnode.text為undefined 
 ? ? *  兩種情況都可以通過innerText屬性直接完成dom更新 
 ? ? *  情況1直接更新text 情況2相當(dāng)于去掉了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
?
 ? ? ?// 對(duì)比兩個(gè)節(jié)點(diǎn)的children 并更新對(duì)應(yīng)的真實(shí)dom節(jié)點(diǎn)
 ? ? ?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 對(duì)比子節(jié)點(diǎn)列表并更新真實(shí)Dom
 * @param {*} oldCh 舊虛擬Dom子節(jié)點(diǎn)列表 
 * @param {*} newCh 新虛擬Dom子節(jié)點(diǎn)列表 
 * @param {*} parent 新舊虛擬節(jié)點(diǎn)對(duì)應(yīng)的真實(shí)Dom
 * @returns 
 */
export default function updateChildren(oldCh, newCh, parent) {
 ?// 定義四個(gè)指針 舊前 舊后 新前 新后 （四個(gè)指針兩兩一對(duì)，每一對(duì)前后指針?biāo)赶虻墓?jié)點(diǎn)以及其之間的節(jié)點(diǎn)為未處理的子節(jié)點(diǎn)）
 ?let oldStartIndex = 0;
 ?let oldEndIndex = oldCh.length - 1;
 ?let newStartIndex = 0;
 ?let newEndIndex = newCh.length - 1;
?
 ?// 四個(gè)指針對(duì)應(yīng)的節(jié)點(diǎn)
 ?let oldStartNode = oldCh[oldStartIndex];
 ?let oldEndNode = oldCh[oldEndIndex];
 ?let newStartNode = newCh[newStartIndex];
 ?let newEndNode = newCh[newEndIndex];
?
 ?// oldCh中每個(gè)子節(jié)點(diǎn) key 與 index的哈希表 用于四種對(duì)比規(guī)則都不匹配的情況下在oldCh中尋找節(jié)點(diǎn)
 ?const keyMap = new Map();
?
 ?/**
 ? * 開始遍歷兩個(gè)children數(shù)組進(jìn)行細(xì)節(jié)對(duì)比
 ? * 對(duì)比規(guī)則：舊前-新前 舊后-新后 舊前-新后 舊后-新前
 ? * 對(duì)比之后指針進(jìn)行移動(dòng)
 ? * 直到指針不滿足以下條件 意味著有一對(duì)前后指針之間再無未處理的子節(jié)點(diǎn) 則停止對(duì)比 直接操作DOM
 ? */
 ?while (oldStartIndex <= oldEndIndex && newStartIndex <= newEndIndex) {
 ? ?// 這四種情況是為了讓指針在移動(dòng)的過程中跳過空節(jié)點(diǎn)
 ? ?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");
 ? ? ?// 舊前-新前是同一個(gè)虛擬節(jié)點(diǎn)
?
 ? ? ?// 兩個(gè)子節(jié)點(diǎn)再對(duì)比他們的子節(jié)點(diǎn)并更新dom （遞歸切入點(diǎn)）
 ? ? ?patchDetails(oldStartNode, newStartNode);
 ? ? ?// 指針移動(dòng)
 ? ? ?oldStartNode = oldCh[++oldStartIndex];
 ? ? ?newStartNode = newCh[++newStartIndex];
 ?  } else if (isSame(oldEndNode, newEndNode)) {
 ? ? ?console.log("method2");
 ? ? ?// 舊后-新后是同一個(gè)虛擬節(jié)點(diǎn)
?
 ? ? ?// 兩個(gè)子節(jié)點(diǎn)再對(duì)比他們的子節(jié)點(diǎn)并更新dom （遞歸切入點(diǎn)）
 ? ? ?patchDetails(oldEndNode, newEndNode);
 ? ? ?// 指針移動(dòng)
 ? ? ?oldEndNode = oldCh[--oldEndIndex];
 ? ? ?newEndNode = newCh[--newEndIndex];
 ?  } else if (isSame(oldStartNode, newEndNode)) {
 ? ? ?console.log("method3");
 ? ? ?// 舊前-新后是同一個(gè)虛擬節(jié)點(diǎn)
?
 ? ? ?// 兩個(gè)子節(jié)點(diǎn)再對(duì)比他們的子節(jié)點(diǎn)并更新dom （遞歸切入點(diǎn)）
 ? ? ?patchDetails(oldStartNode, newEndNode);
?
 ? ? ?/**
 ? ? ? *  這一步多一個(gè)移動(dòng)(真實(shí))節(jié)點(diǎn)的操作
 ? ? ? *  需要把當(dāng)前指針?biāo)赶虻淖庸?jié)點(diǎn) 移動(dòng)到 oldEndIndex所對(duì)應(yīng)真實(shí)節(jié)點(diǎn)之后（也就是未處理真實(shí)節(jié)點(diǎn)的尾部）
 ? ? ? *  注意：這一步是在操作真實(shí)節(jié)點(diǎn)
 ? ? ? */
 ? ? ?parent.insertBefore(oldStartNode.elm, oldEndNode.elm.nextSibling);
?
 ? ? ?// 指針移動(dòng)
 ? ? ?oldStartNode = oldCh[++oldStartIndex];
 ? ? ?newEndNode = newCh[--newEndIndex];
 ?  } else if (isSame(oldEndNode, newStartNode)) {
 ? ? ?console.log("method4");
 ? ? ?// 舊后-新前 是同一個(gè)虛擬節(jié)點(diǎn)
?
 ? ? ?// 兩個(gè)子節(jié)點(diǎn)再對(duì)比他們的子節(jié)點(diǎn)并更新dom （遞歸切入點(diǎn)）
 ? ? ?patchDetails(oldEndNode, newStartNode);
 ? ? ?/**
 ? ? ? *  這一步多一個(gè)移動(dòng)(真實(shí))節(jié)點(diǎn)的操作
 ? ? ? *  與method3不同在移動(dòng)位置
 ? ? ? *  需要把當(dāng)前指針?biāo)赶虻淖庸?jié)點(diǎn) 移動(dòng)到 oldStartIndex所對(duì)應(yīng)真實(shí)節(jié)點(diǎn)之前（也就是未處理真實(shí)節(jié)點(diǎn)的頂部）
 ? ? ? *  注意：這一步是在操作真實(shí)節(jié)點(diǎn)
 ? ? ? */
 ? ? ?parent.insertBefore(oldEndNode.elm, oldCh[oldStartIndex].elm);
?
 ? ? ?// 指針移動(dòng)
 ? ? ?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中搜索當(dāng)前newStartIndex所指向的節(jié)點(diǎn)
 ? ? ?if (keyMap.has(newStartNode.key)) {
 ? ? ? ?// 搜索到了
?
 ? ? ? ?// 先獲取oldCh中該虛擬節(jié)點(diǎn)
 ? ? ? ?const oldMoveNode = oldCh[keyMap.get(newStartNode.key)];
 ? ? ? ?// 兩個(gè)子節(jié)點(diǎn)再對(duì)比他們的子節(jié)點(diǎn)并更新dom （遞歸切入點(diǎn)）
 ? ? ? ?patchDetails(oldMoveNode, newStartNode);
?
 ? ? ? ?// 移動(dòng)這個(gè)節(jié)點(diǎn)（移動(dòng)的是真實(shí)節(jié)點(diǎn)）
 ? ? ? ?parent.insertBefore(oldMoveNode.elm, oldStartNode.elm);
?
 ? ? ? ?// 該虛擬節(jié)點(diǎn)設(shè)置為undefined（還記得最開始的四個(gè)條件嗎，因?yàn)檫@里會(huì)將子節(jié)點(diǎn)制空，所以加了那四個(gè)條件）
 ? ? ? ?oldCh[keyMap.get(newStartNode.key)] = undefined;
 ? ? ? ? ?
 ? ?  } else {
 ? ? ? ?// 沒搜索到 直接插入
 ? ? ? ?parent.insertBefore(createEle(newStartNode), oldStartNode.elm);
 ? ?  }
?
 ? ? ?// 指針移動(dòng)
 ? ? ?newStartNode = newCh[++newStartIndex];
 ?  }
  }
?
 ?/**
 ? * 插入和刪除節(jié)點(diǎn)
 ? * while結(jié)束后 有一對(duì)前后指針之間仍然有未處理的子節(jié)點(diǎn)，那么就會(huì)進(jìn)行插入或者刪除操作
 ? * oldCh的雙指針中有未處理的子節(jié)點(diǎn)，進(jìn)行刪除操作
 ? * newCh的雙指針中有未處理的子節(jié)點(diǎn)，進(jìn)行插入操作
 ? */
 ?if (oldStartIndex <= oldEndIndex) {
 ? ?// 刪除
 ? ?for (let i = oldStartIndex; i <= oldEndIndex; i++) {
 ? ? ?// 加判斷是因?yàn)閛ldCh[i]有可能為undefined
 ? ? ?if(oldCh[i]) parent.removeChild(oldCh[i].elm);
 ?  }
  } else if (newStartIndex <= newEndIndex) {
 ? ?/**
 ? ? * 插入
 ? ? * 這里需要注意的點(diǎn)是從哪里插入，也就是appendChild的第二個(gè)參數(shù)
 ? ? * 應(yīng)該從oldStartIndex對(duì)應(yīng)的位置插入
 ? ? */
 ? ?for (let i = newStartIndex; i <= newEndIndex; i++) {
 ? ? ?// oldCh[oldStartIndex]存在是從頭部插入
 ? ? ?parent.insertBefore(createEle(newCh[i]), oldCh[oldStartIndex] ? oldCh[oldStartIndex].elm : undefined);
 ?  }
  }
}
?
// 判斷兩個(gè)虛擬節(jié)點(diǎn)是否為同一個(gè)虛擬節(jié)點(diǎn)
function isSame(a, b) {
 ?return a.sel == b.sel && a.key == b.key;
}