<ul class="list">
    <li>a</li>
    <li>b</li>
    <li>c</li>
</ul>

let vnode = h('ul.list', [
  h('li','a'),
  h('li','b'),
  h('li','c'),
])
console.log(vnode)

export interface VNodeData {
    props?: Props
    attrs?: Attrs
    class?: Classes
    style?: VNodeStyle
    dataset?: Dataset
    on?: On
    hero?: Hero
    attachData?: AttachData
    hook?: Hooks
    key?: Key
    ns?: string // for SVGs
    fn?: () => VNode // for thunks
    args?: any[] // for thunks
    [key: string]: any // for any other 3rd party module
}
export type Key = string | number
const interface VNode = {
    sel: string | undefined, // 選擇器
    data: VNodeData | undefined, // VNodeData上面定義的VNodeData
    children: Array<VNode | string> | undefined, //子節(jié)點,與text互斥
    text: string | undefined, // 標簽中間的文本內(nèi)容
    elm: Node | undefined, // 轉(zhuǎn)換而成的真實DOM
    key: Key | undefined // 字符串或者數(shù)字
}

// 案例1 vue項目中的main.js的創(chuàng)建vue實例
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount("#app");
//案例2 列表中使用render渲染
columns: [
    {
        title: "操作",
        key: "action",
        width: 150,
        render: (h, params) => {
            return h('div', [
                h('Button', {
                    props: {
                        size: 'small'
                    },
                    style: {
                        marginRight: '5px',
                        marginBottom: '5px',
                    },
                    on: {
                        click: () => {
                            this.toEdit(params.row.uuid);
                        }
                    }
                }, '編輯')
            ]);
        }
    }
]

import {init} from 'snabbdom/build/package/init.js'
import {h} from 'snabbdom/build/package/h.js'
// 1.導入模塊
import {styleModule} from "snabbdom/build/package/modules/style";
import {eventListenersModule} from "snabbdom/build/package/modules/eventListeners";
// 2.注冊模塊
const patch = init([
  styleModule,
  eventListenersModule
])
// 3.使用h()函數(shù)的第二個參數(shù)傳入模塊中使用的數(shù)據(jù)(對象)
let vnode = h('div', [
  h('h1', {style: {backgroundColor: 'red'}}, 'Hello world'),
  h('p', {on: {click: eventHandler}}, 'Hello P')
])
function eventHandler() {
  alert('疼,別摸我')
}
const app = document.querySelector('#app')
patch(app,vnode)

// src/package/init.ts
/* 第一參數(shù)就是各個模塊
   第二參數(shù)就是DOMAPI,可以把DOM轉(zhuǎn)換成別的平臺的API,
也就是說支持跨平臺使用,當不傳的時候默認是htmlDOMApi,見下文
   init是一個高階函數(shù),一個函數(shù)返回另外一個函數(shù),可以緩存modules,與domApi兩個參數(shù),
那么以后直接只傳oldValue跟newValue(vnode)就可以了*/
export function init (modules: Array<Partial<Module>>, domApi?: DOMAPI) {
...
return function patch (oldVnode: VNode | Element, vnode: VNode): VNode {}
}

// h函數(shù)
export function h (sel: string): VNode
export function h (sel: string, data: VNodeData | null): VNode
export function h (sel: string, children: VNodeChildren): VNode
export function h (sel: string, data: VNodeData | null, children: VNodeChildren): VNode
export function h (sel: any, b?: any, c?: any): VNode {
  var data: VNodeData = {}
  var children: any
  var text: any
  var i: number
    ...
  return vnode(sel, data, children, text, undefined) //最終返回一個vnode函數(shù)
};
// vnode函數(shù)
export function vnode (sel: string | undefined,
  data: any | undefined,
  children: Array<VNode | string> | undefined,
  text: string | undefined,
  elm: Element | Text | undefined): VNode {
  const key = data === undefined ? undefined : data.key
  return { sel, data, children, text, elm, key } //最終生成Vnode對象
}

function add(a:number,b:number){
console.log(a+b)
}
function add(a:number,b:number,c:number){
console.log(a+b+c)
}
add(1,2)
add(1,2,3)

function add(a:number,b:number){
console.log(a+b)
}
function add(a:number,b:string){
console.log(a+b)
}
add(1,2)
add(1,'2')

return function patch(oldVnode: VNode | Element, vnode: VNode): VNode {    
    let i: number, elm: Node, parent: Node
    const insertedVnodeQueue: VNodeQueue = []
    // cbs.pre就是所有模塊的pre鉤子函數(shù)集合
    for (i = 0; i < cbs.pre.length; ++i) cbs.pre[i]()
    // isVnode函數(shù)時判斷oldVnode是否是一個虛擬DOM對象
    if (!isVnode(oldVnode)) {
        // 若不是即把Element轉(zhuǎn)換成一個虛擬DOM對象
        oldVnode = emptyNodeAt(oldVnode)
    }
    // sameVnode函數(shù)用于判斷兩個虛擬DOM是否是相同的,源碼見補充1;
    if (sameVnode(oldVnode, vnode)) {
        // 相同則運行patchVnode對比兩個節(jié)點,關(guān)于patchVnode后面會重點說明(核心)
        patchVnode(oldVnode, vnode, insertedVnodeQueue)
    } else {
        elm = oldVnode.elm! // !是ts的一種寫法代碼oldVnode.elm肯定有值
        // parentNode就是獲取父元素
        parent = api.parentNode(elm) as Node
        // createElm是用于創(chuàng)建一個dom元素插入到vnode中(新的虛擬DOM)
        createElm(vnode, insertedVnodeQueue)
        if (parent !== null) {
            // 把dom元素插入到父元素中,并且把舊的dom刪除
            api.insertBefore(parent, vnode.elm!, api.nextSibling(elm))// 把新創(chuàng)建的元素放在舊的dom后面
            removeVnodes(parent, [oldVnode], 0, 0)
        }
    }
    for (i = 0; i < insertedVnodeQueue.length; ++i) {
        insertedVnodeQueue[i].data!.hook!.insert!(insertedVnodeQueue[i])
    }
    for (i = 0; i < cbs.post.length; ++i) cbs.post[i]()
    return vnode
}

function patchVnode(oldVnode: VNode, vnode: VNode, insertedVnodeQueue: VNodeQueue) {
    const hook = vnode.data?.hook
    hook?.prepatch?.(oldVnode, vnode)
    const elm = vnode.elm = oldVnode.elm!
    const oldCh = oldVnode.children as VNode[]
    const ch = vnode.children as VNode[]
    if (oldVnode === vnode) return
    if (vnode.data !== undefined) {
        for (let i = 0; i < cbs.update.length; ++i) cbs.update[i](oldVnode, vnode)
        vnode.data.hook?.update?.(oldVnode, vnode)
    }
    if (isUndef(vnode.text)) { // 新節(jié)點的text屬性是undefined
        if (isDef(oldCh) && isDef(ch)) { // 當新舊節(jié)點都存在子節(jié)點
            if (oldCh !== ch) updateChildren(elm, oldCh, ch, insertedVnodeQueue) //并且他們的子節(jié)點不相同執(zhí)行updateChildren函數(shù),后續(xù)會重點說明(核心)
        } else if (isDef(ch)) { // 只有新節(jié)點有子節(jié)點
            // 當舊節(jié)點有text屬性就會把''賦予給真實dom的text屬性
            if (isDef(oldVnode.text)) api.setTextContent(elm, '') 
            // 并且把新節(jié)點的所有子節(jié)點插入到真實dom中
            addVnodes(elm, null, ch, 0, ch.length - 1, insertedVnodeQueue)
        } else if (isDef(oldCh)) { // 清除真實dom的所有子節(jié)點
            removeVnodes(elm, oldCh, 0, oldCh.length - 1)
        } else if (isDef(oldVnode.text)) { // 把''賦予給真實dom的text屬性
            api.setTextContent(elm, '')
        }
    } else if (oldVnode.text !== vnode.text) { //若舊節(jié)點的text與新節(jié)點的text不相同
        if (isDef(oldCh)) { // 若舊節(jié)點有子節(jié)點,就把所有的子節(jié)點刪除
            removeVnodes(elm, oldCh, 0, oldCh.length - 1)
        }
        api.setTextContent(elm, vnode.text!) // 把新節(jié)點的text賦予給真實dom
    }
    hook?.postpatch?.(oldVnode, vnode) // 更新視圖
}

function updateChildren(parentElm, oldCh, newCh, insertedVnodeQueue) {
    let oldStartIdx = 0;                // 舊節(jié)點開始節(jié)點索引
    let newStartIdx = 0;                // 新節(jié)點開始節(jié)點索引
    let oldEndIdx = oldCh.length - 1;   // 舊節(jié)點結(jié)束節(jié)點索引
    let oldStartVnode = oldCh[0];       // 舊節(jié)點開始節(jié)點
    let oldEndVnode = oldCh[oldEndIdx]; // 舊節(jié)點結(jié)束節(jié)點
    let newEndIdx = newCh.length - 1;   // 新節(jié)點結(jié)束節(jié)點索引
    let newStartVnode = newCh[0];       // 新節(jié)點開始節(jié)點
    let newEndVnode = newCh[newEndIdx]; // 新節(jié)點結(jié)束節(jié)點
    let oldKeyToIdx;                    // 節(jié)點移動相關(guān)
    let idxInOld;                       // 節(jié)點移動相關(guān)
    let elmToMove;                      // 節(jié)點移動相關(guān)
    let before;
    // 同級別節(jié)點比較
    while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
        if (oldStartVnode == null) {
            oldStartVnode = oldCh[++oldStartIdx]; // Vnode might have been moved left
        }
        else if (oldEndVnode == null) {
            oldEndVnode = oldCh[--oldEndIdx];
        }
        else if (newStartVnode == null) {
            newStartVnode = newCh[++newStartIdx];
        }
        else if (newEndVnode == null) {
            newEndVnode = newCh[--newEndIdx];
        }
        else if (sameVnode(oldStartVnode, newStartVnode)) { // 判斷情況1
            patchVnode(oldStartVnode, newStartVnode, insertedVnodeQueue);
            oldStartVnode = oldCh[++oldStartIdx];
            newStartVnode = newCh[++newStartIdx];
        }
        else if (sameVnode(oldEndVnode, newEndVnode)) {   // 情況2
            patchVnode(oldEndVnode, newEndVnode, insertedVnodeQueue);
            oldEndVnode = oldCh[--oldEndIdx];
            newEndVnode = newCh[--newEndIdx];
        }
        else if (sameVnode(oldStartVnode, newEndVnode)) { // Vnode moved right情況3
            patchVnode(oldStartVnode, newEndVnode, insertedVnodeQueue);
            api.insertBefore(parentElm, oldStartVnode.elm, api.nextSibling(oldEndVnode.elm));
            oldStartVnode = oldCh[++oldStartIdx];
            newEndVnode = newCh[--newEndIdx];
        }
        else if (sameVnode(oldEndVnode, newStartVnode)) { // Vnode moved left情況4
            patchVnode(oldEndVnode, newStartVnode, insertedVnodeQueue);
            api.insertBefore(parentElm, oldEndVnode.elm, oldStartVnode.elm);
            oldEndVnode = oldCh[--oldEndIdx];
            newStartVnode = newCh[++newStartIdx];
        }
        else {                                             // 情況5
            if (oldKeyToIdx === undefined) {
                oldKeyToIdx = createKeyToOldIdx(oldCh, oldStartIdx, oldEndIdx);
            }
            idxInOld = oldKeyToIdx[newStartVnode.key];
            if (isUndef(idxInOld)) { // New element        // 創(chuàng)建新的節(jié)點在舊節(jié)點的新節(jié)點前
                api.insertBefore(parentElm, createElm(newStartVnode, insertedVnodeQueue), oldStartVnode.elm);
            }
            else {
                elmToMove = oldCh[idxInOld];
                if (elmToMove.sel !== newStartVnode.sel) { // 創(chuàng)建新的節(jié)點在舊節(jié)點的新節(jié)點前
                    api.insertBefore(parentElm, createElm(newStartVnode, insertedVnodeQueue), oldStartVnode.elm);
                }
                else {
                                                           // 在舊節(jié)點數(shù)組中找到相同的節(jié)點就對比差異更新視圖,然后移動位置
                    patchVnode(elmToMove, newStartVnode, insertedVnodeQueue);
                    oldCh[idxInOld] = undefined;
                    api.insertBefore(parentElm, elmToMove.elm, oldStartVnode.elm);
                }
            }
            newStartVnode = newCh[++newStartIdx];
        }
    }
    // 循環(huán)結(jié)束的收尾工作
    if (oldStartIdx <= oldEndIdx || newStartIdx <= newEndIdx) {
        if (oldStartIdx > oldEndIdx) {
            // newCh[newEndIdx + 1].elm就是舊節(jié)點數(shù)組中的結(jié)束節(jié)點對應的dom元素
            // newEndIdx+1是因為在之前成功匹配了newEndIdx需要-1
            // newCh[newEndIdx + 1].elm,因為已經(jīng)匹配過有相同的節(jié)點了,它就是等于舊節(jié)點數(shù)組中的結(jié)束節(jié)點對應的dom元素(oldCh[oldEndIdx + 1].elm)
            before = newCh[newEndIdx + 1] == null ? null : newCh[newEndIdx + 1].elm;
            // 把新節(jié)點數(shù)組中多出來的節(jié)點插入到before前
            addVnodes(parentElm, before, newCh, newStartIdx, newEndIdx, insertedVnodeQueue);
        }
        else {
            // 這里就是把沒有匹配到相同節(jié)點的節(jié)點刪除掉
            removeVnodes(parentElm, oldCh, oldStartIdx, oldEndIdx);
        }
    }
}