vNode方法

創(chuàng)建vNode.js文件，返回一個包裝成虛擬節(jié)點(diǎn)的方法

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

h方法

實現(xiàn)一個低配版本的h函數(shù)，調(diào)用的形態(tài)為以下的三種之一：
1.h('div', {}, 'text')
2.h('div', {}, [])
3.h('div', {}, h())

import vnode from "./vNode";
export default function h(sel, data, c) {
    // 檢查入?yún)⑹炀?    if (arguments.length !== 3) {
        throw new Error('請傳入三個參數(shù)')
    }
    // 檢查c參數(shù)類型 是text，h('div', {}, 'text')
    if (typeof c == 'string' || typeof c == 'number' ) {
        return vnode(sel,data,undefined,c,undefined)
    // 檢查c參數(shù)類型 是h數(shù)組，h('div', {}, [])
    }else if(Array.isArray(c)) {
        let children = []
        for (let i = 0; i < c.length; i++) {
            if (!(typeof c[i] == 'object' )) {
                throw new Error('傳入的數(shù)組函數(shù)不是一個h對象')
            }
            children.push(c[i])
        }
        return vnode(sel,data,children,undefined,undefined) 
    // 檢查c參數(shù)類型 是h對象，h('div', {}, h())
    }else if(typeof c == 'object' && c.hasOwnProperty('sel')) {
        let children = c
        return vnode(sel,data,children,undefined,undefined)
    }else{
        throw new Error('傳入的第三個參數(shù)類型錯誤')
    }
}

createElement方法

真正的創(chuàng)建節(jié)點(diǎn)，把傳入的虛擬節(jié)點(diǎn)vnode創(chuàng)建為真實dom

export default function createElement(vnode) {
    let domNode = document.createElement(vnode.sel)
    // 虛擬節(jié)點(diǎn)有text屬性 沒有子元素
    if (vnode.text!=='' && vnode.children === undefined) {
        domNode.innerText = vnode.text
    }
     // 虛擬節(jié)點(diǎn)有children屬性 有子元素 需要遞歸
    else if (Array.isArray(vnode.children) && vnode.children.length >0 ){
        const list = vnode.children
        // 它內(nèi)部有子節(jié)點(diǎn)，需要遞歸append上樹
        for (let i = 0; i < list.length; i++) {
            // 創(chuàng)建出字節(jié)點(diǎn)dom 遞歸調(diào)用createElement
            let chDom = createElement(list[i])
            // 上樹
            domNode.appendChild(chDom)
        }
    }
    vnode.elm = domNode
    // eml是純dom對象，return出去
    return vnode.elm
}

patch方法

核心，實現(xiàn)虛擬節(jié)點(diǎn)的真實上樹

import vnode from "./vNode";
import createElement from "./createElement";
import patchVnode from "./patchVnode";

// 書寫上樹節(jié)點(diǎn)
export default function patch(oldVnode, newVnode){
    // 判斷傳入的第一個參數(shù)，是否是虛擬節(jié)點(diǎn)
    if ((oldVnode&&oldVnode.sel == '') || (oldVnode&&oldVnode.sel == undefined) ) {
        //是真實節(jié)點(diǎn) 包裝成虛擬節(jié)點(diǎn)后返回
        oldVnode = vnode(oldVnode.tagName.toLowerCase(), {}, [], oldVnode.elm, oldVnode)
    }
    // 判斷新舊階段是否為同一個節(jié)點(diǎn)
    if (oldVnode.key === newVnode.key && oldVnode.sel === newVnode.sel) {
        patchVnode(oldVnode, newVnode)

    }else{
        // 進(jìn)行暴力刪除舊節(jié)點(diǎn)，插入新節(jié)點(diǎn)
        let newElm = createElement(newVnode)
        if (oldVnode.elm.parentNode && newElm) {
            oldVnode.elm.parentNode.insertBefore(newElm, oldVnode.elm)
        } 
        oldVnode.elm.parentNode.removeChild(oldVnode.elm)
    }
}

patchVnode方法

patch函數(shù)調(diào)用過程中，當(dāng)判斷新舊階段是否為同一個節(jié)點(diǎn)時，即key和選擇器一致時，可以判斷是同一個節(jié)點(diǎn)，進(jìn)行精細(xì)化比較

import updateChildren from "./updateChildren"
export default function(oldVnode, newVnode){
        // key和選擇器一致時，可以判斷是同一個節(jié)點(diǎn)，進(jìn)行精細(xì)化比較
        // 1,判斷新舊節(jié)點(diǎn)是否完全相同 什么都不用做
        if (oldVnode === newVnode) return

        // 2,判斷新節(jié)點(diǎn)有沒有text屬性
        if (newVnode.text !== undefined && (newVnode.children === undefined || newVnode.children.length===0)) {
            // console.log('有text屬性', oldVnode, newVnode)
            // text不相同 直接修改text
            if (newVnode.text !== oldVnode.text) {
                // oldElm.innerText = newVnode.text
                oldVnode.elm.innerText = newVnode.text
            }
        // 3,判斷新節(jié)點(diǎn)有沒有children屬性
        }else{ 
            //先判斷舊節(jié)點(diǎn)有沒有children
            if (oldVnode.children !== undefined && oldVnode.children.length>0) {
                // diff算法實現(xiàn) 最復(fù)雜的算法部分
                updateChildren(oldVnode.elm, oldVnode.children, newVnode.children)
            }else{
                // console.log('舊節(jié)點(diǎn)沒有text屬性 沒有children',oldVnode, newVnode)
                //沒有，清空老的節(jié)點(diǎn)文字，追加children數(shù)組
                oldVnode.elm.innerText = ''
                for (let i = 0; i < newVnode.children.length; i++) {
                    let dom = createElement(newVnode.children[i])
                    oldVnode.elm.appendChild(dom)
                }
            }
        }
}

updateChildren

diff算法的核心，也是最復(fù)雜的算法部分，當(dāng)新舊節(jié)點(diǎn)都有children時，如何實現(xiàn)最小量的更新策略。即舊節(jié)點(diǎn)沒有text屬性, 有children，這時會進(jìn)入diff算法實現(xiàn)。

import patchVnode from "./patchVnode"
import createElement from "./createElement"

// 檢查是否是同一節(jié)點(diǎn)
function checkSameVnode(a, b) {
    return a.sel === b.sel && a.key === b.key
}

export default function (parentElm, oldCn, newCn) {

    // 定義指針 新前、新后，舊前、舊后
    let newStartIdx = 0
    let newEndIdx = newCn.length - 1
    let oldStartIdx = 0
    let oldEndIdx = oldCn.length - 1

    // 定義新舊節(jié)點(diǎn)
    let newStartVnode = newCn[0]
    let newEndVnode = newCn[newEndIdx]
    let oldStartVnode = oldCn[0]
    let oldEndVnode = oldCn[oldEndIdx]

    // 尋找keymap
    let keyMap = null

    // 開始循環(huán)語句 四種命中查找：
    //     新前與舊前
    //     新后與舊后
    //     新后與舊前
    //     新前與舊后
    while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
        // 先略過加了undefined標(biāo)記的那項
        if (oldStartVnode == null || oldCn[oldStartIdx] == undefined) {
            oldStartVnode = oldCn[++oldStartIdx]
        } else if (oldEndVnode == null || oldCn[oldEndIdx] == undefined) {
            oldEndVnode = oldCn[--oldEndIdx]
        } else if (newStartVnode == null || newCn[newStartIdx] == undefined) {
            newStartVnode = newCn[++newStartIdx]
        } else if (newEndVnode == null || newCn[newEndIdx] == undefined) {
            newEndVnode = newCn[--newEndIdx]
        }
        // 判斷 新舊 前面的節(jié)點(diǎn)是否相同
        else if (checkSameVnode(newStartVnode, oldStartVnode)) {
            console.log('1) 新前與舊前');
            patchVnode(oldStartVnode, newStartVnode)
            oldStartVnode = oldCn[++oldStartIdx]
            newStartVnode = newCn[++newStartIdx]

        } else if (checkSameVnode(newEndVnode, oldEndVnode)) {
            console.log('2) 新后與舊后');
            patchVnode(oldEndVnode, newEndVnode)
            oldEndVnode = oldCn[--oldEndIdx]
            newEndVnode = newCn[--newEndIdx]

        } else if (checkSameVnode(newEndVnode, oldStartVnode)) {
            console.log('3) 新后與舊前');
            // 先移動 后++
            parentElm.insertBefore(oldStartVnode.elm, oldEndVnode.elm.nextSibling)
            patchVnode(oldStartVnode, newEndVnode)
            oldStartVnode = oldCn[++oldStartIdx]
            newEndVnode = newCn[--newEndIdx]

        } else if (checkSameVnode(newStartVnode, oldEndVnode)) {
            console.log('4) 新前與舊后');
            parentElm.insertBefore(oldEndVnode.elm, oldStartVnode.elm)
            patchVnode(oldEndVnode, newStartVnode)
            oldEndVnode = oldCn[--oldEndIdx]
            newStartVnode = newCn[++newStartIdx]

        } else {
            console.log('四種查找都都沒有命中的時候');
            // 尋找 key 的 map
            // 這個map很好理解呀,把old節(jié)點(diǎn)的存入對象中,然后看看new中節(jié)點(diǎn)的key是否可以在對象中找到
            if (!keyMap) {
                keyMap = {}
                for (let i = oldStartIdx; i <= oldEndIdx; i++) {
                    const key = oldCn[i].key
                    if (key !== undefined) {
                        keyMap[key] = i
                    }
                }
            }

            const idxInOld = keyMap[newStartVnode.key]
            if (idxInOld == undefined) {
                // 是undefined，表示是全新的項，目前是虛擬節(jié)點(diǎn)不是真正的dom節(jié)點(diǎn)
                parentElm.insertBefore(createElement(newStartVnode), oldStartVnode.elm)
            } else {
                // 不是undefined，不是全新的項，需要移動, 而不是刪除后的新增
                const elmToMove = oldCn[idxInOld]
                patchVnode(elmToMove, newStartVnode)
                oldCn[idxInOld] = undefined
                parentElm.insertBefore(elmToMove.elm, oldStartVnode.elm)
            }

            // 指針下移，只移動新的頭
            newStartVnode = newCn[++newStartIdx]
        }
    }

    // 查找循環(huán)結(jié)束后，有沒有剩余的節(jié)點(diǎn)
    if (newStartIdx <= newEndIdx) {
        console.log('新的節(jié)點(diǎn)上 有剩余的節(jié)點(diǎn)，需要新增')
        const before = newCn[newEndIdx + 1] == null ? null : newCn[newEndIdx + 1].elm
        for (let i = newStartIdx; i <= newEndIdx; i++) {
            parentElm.insertBefore(createElement(newCn[i]), before)
        }
    } else if (oldStartIdx <= oldEndIdx) {
        console.log('舊的節(jié)點(diǎn)上 有剩余的節(jié)點(diǎn)，需要批量移除')
        // 批量刪除oldStartIdx 與 oldEndIdx之間剩余的項
        for (let i = oldStartIdx; i <= oldEndIdx; i++) {
            if (oldCn[i]) {
                parentElm.removeChild(oldCn[i].elm)
            }
        }
    }
}

一些測試用例

// 先引入h函數(shù)與patch方法
import h from "./my-snabbdom/h";
import patch from "./my-snabbdom/patch";
// 獲取真實dom節(jié)點(diǎn)，創(chuàng)建虛擬新舊節(jié)點(diǎn)
const container = window.document.getElementById('box')
const myNode_old = h('h2', {}, [
  h('span', {}, 'span11111  '),
  h('span', {}, 'span22222'),
])
const myNode_new = h('h2', {}, 'rita開始學(xué)源碼')
// 上樹
patch(container, myNode_old)
patch(myNode_old, myNode_new )