<div id="wrapper" class="1">
    <span style="color:red">hello</span>
    world
</div> 

h('div', { id: 'wrapper', class: '1' }, h('span', { style: { color: 'red' } }, 'hello'), 'world');

let vd = {
    type: 'div',
    props: { id: 'wrapper', class: '1' },
    children: [
        {
            type: 'span',
            props: { color: 'red' },
            children: [{}]
        },
        {
            type: '',
            props: '',
            text: 'world'
        }
    ]
}

 function createElement(type, props = {}, ...children) {
    // 防止沒有傳值的話就賦值一個初始值
    let key;
    if (props.key) {
        key = props.key
        delete props.key
    }
    // 如果孩子節(jié)點(diǎn)有字符串類型的，也需要轉(zhuǎn)化為虛擬節(jié)點(diǎn)
    children = children.map(child => {
        if (typeof child === 'string') {
            // 把不是節(jié)點(diǎn)類型的子節(jié)點(diǎn)包裝為虛擬節(jié)點(diǎn)
            return vNode(undefined, undefined, undefined, undefined, child)
        } else {
            return child
        }
    })
    return vNode(type, props, key, children)
}
function vNode(type, props, key, children, text = undefined) {
    return {
        type,
        props,
        key,
        children,
        text
    }
}

export function render(vnode, container) {
    let ele = createDomElementFrom(vnode) //通過這個方法轉(zhuǎn)換真實(shí)節(jié)點(diǎn)
    if (ele) container.appendChild(ele)
}

function createDomElementFrom(vnode) {
    let { type, key, props, children, text } = vnode
    if (type) {//說明是一個標(biāo)簽
        // 1. 給虛擬元素加上一個domElemnt屬性，建立真實(shí)和虛擬dom的聯(lián)系，后面可以用來跟新真實(shí)dom
        vnode.domElement = document.createElement(type)
        // 2. 根據(jù)當(dāng)前虛擬節(jié)點(diǎn)的屬性，去跟新真實(shí)dom的值
        updateProperties(vnode)
        // 3. children中方的也是一個個的虛擬節(jié)點(diǎn)(就是遞歸把兒子追加到當(dāng)前元素里)
        children.forEach(childVnode => render(childVnode, vnode.domElement))
    } else {//說明是一個文本
    }
    return vnode.domElement

}

function updateProperties(newVnode, oldProps = {}) {
    let domElement = newVnode.domElement //真實(shí)dom，
    let newProps = newVnode.props; //當(dāng)前虛擬節(jié)點(diǎn)中的屬性
    // 如果老的里面有，新的里面沒有，說明這個屬性被移出了
    for (let oldPropName in oldProps) {
        if (!newProps[oldPropName]) {
            delete domElement[oldPropName] //新的沒有，為了復(fù)用這個dom，直接刪除
        }
    }
    // 如果新的里面有style，老的里面也有style，style可能還不一樣
    let newStyleObj = newProps.style || {}
    let oldStyleObj = oldProps.style || {}
    for (let propName in oldStyleObj) {
        if (!newStyleObj[propName]) {
            domElement.style[propName] = ''
        }
    }
    // 老的里面沒有，新的里面有
    for (let newPropsName in newProps) {
        // 直接用新節(jié)點(diǎn)的屬性覆蓋老節(jié)點(diǎn)的屬性
        if (newPropsName === 'style') {
            let styleObj = newProps.style;
            for (let s in styleObj) {
                domElement.style[s] = styleObj[s]
            }
        } else {
            domElement[newPropsName] = newProps[newPropsName]
        }
    }

}

export function patch(oldVNode, newVnode) {
    // //判斷類型是否一樣,不一樣直接用新虛擬節(jié)點(diǎn)替換老的
    if (oldVNode.type !== newVnode.type) {
        return oldVNode.domElement.parentNode.replaceChild(
            createDomElementFrom(newVnode), oldVNode.domElement
        )
    }
    // 類型相同，且是文本
    if (oldVNode.text) {
        return oldVNode.document.textContent = newVnode.text
    }
    // 類型一樣，不是文本，是標(biāo)簽，需要根據(jù)新節(jié)點(diǎn)的屬性更新老節(jié)點(diǎn)的屬性
    // 1. 復(fù)用老節(jié)點(diǎn)的真實(shí)dom
    let domElement = newVnode.domElement = oldVNode.domElement
    // 2. 根據(jù)最新的虛擬節(jié)點(diǎn)來更新屬性
    updateProperties(newVnode, oldVNode.props)
    // 比較兒子
    let oldChildren = oldVNode.children
    let newChildren = newVnode.children
    // 1. 老的有兒子，新的有兒子
    if (oldChildren.length > 0 && newChildren.length > 0) {
        // 對比兩個兒子(很復(fù)雜)
    } else if (oldChildren.length > 0) {
        // 2. 老的有兒子，新的沒兒子
        domElement.innerHTML = ''
    } else if (newChildren.length > 0) {
        // 3. 新增了兒子
        for (let i = 0; i < newChildren.length; i++) {
            // 把每個兒子加入元素里
            let ele = createDomElementFrom(newChildren[i])
            domElement.appendChild(ele)
        }
    }


}

let oldNode = h('div', {},
    h('li', { style: { background: 'red' }, key: 'A' }, 'A'),
    h('li', { style: { background: 'blue' }, key: 'B' }, 'A'),
    h('li', { style: { background: 'yellow' }, key: 'C' }, 'C'),
    h('li', { style: { background: 'green' }, key: 'D' }, 'D'),
);

let newVnode = h('div', {},
    h('li', { style: { background: 'red' }, key: 'A' }, 'A'),
    h('li', { style: { background: 'blue' }, key: 'B' }, 'B'),
    h('li', { style: { background: 'yellow' }, key: 'C' }, 'C1'),
    h('li', { style: { background: 'green' }, key: 'D' }, 'D1'),
    h('li', { style: { background: 'black' }, key: 'D' }, 'E'),
);

// 比較是否同一個節(jié)點(diǎn)
function isSameVnode(oldVnode, newVnode) {
    return oldVnode.key == newVnode.key && oldVnode.type == newVnode.type
}
// diff
function updateChildren(parent, oldChildren, newChildren) {
    // 1. 創(chuàng)建舊節(jié)點(diǎn)開頭指針和結(jié)尾
    let oldStartIndex = 0
    let oldStartVnode = oldChildren[oldStartIndex];
    let oldEndIndex = oldChildren.length - 1
    let oldEndVnode = oldChildren[oldEndIndex];
    // 2. 創(chuàng)建新節(jié)點(diǎn)的指針
    let newStartIndex = 0
    let newStartVnode = newChildren[newStartIndex];
    let newEndIndex = newChildren.length - 1
    let newEndVnode = newChildren[newEndIndex];
    // 1. 當(dāng)從后面插入節(jié)點(diǎn)的時(shí)候，希望判斷老的孩子和新的孩子 循環(huán)的時(shí)候，誰先結(jié)束就停止循環(huán)
    while (oldStartIndex <= oldEndIndex && newStartIndex <= newEndIndex) {
        // 注意：比較對象是否相等，你不能用==，因?yàn)橹赶虻奈恢每赡懿灰粯?，可以用type和key
        if (isSameVnode(oldStartVnode, newStartVnode)) {
            //patch比對更新
            patch(oldStartVnode, newStartVnode)
            // 移動指針
            oldStartVnode = oldChildren[++oldStartIndex]
            newStartVnode = newChildren[++newStartIndex]
        }
    }
    if (newStartIndex <= newEndIndex) {
        for (let i = newStartIndex; i <= newEndIndex; i++) {
            parent.appendChild(createDomElementFrom(newChildren[i]))
        }
    }
}

    // 如果是從前往后遍歷說明末尾新增了節(jié)點(diǎn)，會比原來的兒子后面新增了幾個
    // 也可以時(shí)從后往前遍歷，說明比原來的兒子前面新增了幾個
    if (newStartIndex <= newEndIndex) {
        for (let i = newStartIndex; i <= newEndIndex; i++) {
            // 取得第一個值，null代表末尾
            let beforeElement = newChildren[newEndIndex + 1] == null ? null : newChildren[newEndIndex + 1].domElement   parent.insertBefore(createDomElementFrom(newChildren[i]), beforeElement)
        }
    }

else if (isSameVnode(oldStartVnode, newEndVnode)) {
                // 頭和尾巴都不一樣,拿老的頭和新的尾巴比較
                patch(oldStartVnode, newEndVnode)
                // 把舊節(jié)點(diǎn)的頭部插入到舊節(jié)點(diǎn)末尾指針指向的節(jié)點(diǎn)之后一個
                parent.insertBefore(oldStartVnode.domElement, oldEndVnode.domElement.nextSibling)
                // 移動指針
                oldStartVnode = oldChildren[++oldStartIndex]
                newEndVnode = newChildren[--newEndIndex]
            } else if (isSameVnode(oldEndVnode, newStartVnode)) {
                // 頭和尾巴都不一樣,拿老的頭和新的尾巴比較
                patch(oldEndVnode, newStartVnode)
                // 把舊節(jié)點(diǎn)的頭部插入到舊節(jié)點(diǎn)末尾指針指向的節(jié)點(diǎn)之后一個
                parent.insertBefore(oldEndVnode.domElement, oldStartVnode.domElement)
                // 移動指針
                oldEndVnode = oldChildren[--oldEndIndex]
                newStartVnode = newChildren[++newStartIndex]
            } else {

else {
                // 都不一樣，就暴力比對
                // 需要先拿到新的節(jié)點(diǎn)去老的節(jié)點(diǎn)查找是否存在相同的key，存在則復(fù)用，不存在就創(chuàng)建插入即可
                // 1. 先把老的哈希
                let index = map[newStartVnode.key]//看看新節(jié)點(diǎn)的key在不在這個map里
                console.log(index);
                if (index == null) {//沒有相同的key
                    // 直接創(chuàng)建一個，插入到老的前面即可
                    parent.insertBefore(createDomElementFrom(newStartVnode),
                        oldStartVnode.domElement)
                } else {//有，可以復(fù)用
                    let toMoveNode = oldChildren[index]
                    patch(toMoveNode, newStartVnode)//復(fù)用要先patch一下
                    parent.insertBefore(toMoveNode.domElement, oldStartVnode.domElement)
                    oldChildren[index] = undefined
                    // 移動指正
                }
                newStartVnode = newChildren[++newStartIndex]
            }
// 寫一個方法，做成一個哈希表{a:0,b:1,c:2}
function createMapToIndex(oldChildren) {
    let map = {}
    for (let i = 0; i < oldChildren.length; i++) {
        let current = oldChildren[i]
        if (current.key) {
            map[current.key] = i
        }
    }
    return map
}