Virtual DOM的簡單實現(xiàn)

sf_wangchong 發(fā)布于2019-08-22 13:51 / 515人閱讀

摘要：的實現(xiàn)了一套高效的算法來快速的比對更新樹。關(guān)于的實現(xiàn)原理將在后面的文章中提到。對于子節(jié)點的操作將被記錄在父節(jié)點的上。方法主要對具體的節(jié)點進行修改。

之前在看vue的源碼時了解了vue關(guān)于Virtual DOM的一些想法,Virtual DOM可以幫助我們更高效的操作DOM。它通過實現(xiàn)一個vnode的js對象，vnode的對象與dom的node對象是一一對應(yīng)的，通過我們對vnode的操作可以實現(xiàn)對dom的操作，這樣就可以避免頻繁的dom操作帶來的效率問題。vue的Virtual DOM實現(xiàn)了一套高效的diff算法來快速的比對更新dom樹。

關(guān)于vue的Virtual DOM實現(xiàn)原理將在后面的文章中提到。為了方便理解和學(xué)習(xí)，我寫了一個簡單的Virtual DOM操作DOM樹的demo。這里是完整代碼以及DOM

VNode

首先，創(chuàng)建vnode的對象，vnode記錄相應(yīng)的DOM對象的一些屬性。

export default class VNode {

    constructor (tag, nodeType,key, props, text, children){
        this.tag = tag //element類型
        this.nodeType = nodeType //node類型，1為普通節(jié)點，3為文本節(jié)點，8為注釋
        this.key = key
        this.props = props //node的屬性
        this.text = text //文本節(jié)點的內(nèi)容
        this.children = children//子節(jié)點
    }
    //將vnode渲染成DOM節(jié)點的方法
    render(){
        var el
        if(this.nodeType===1){
            el = document.createElement(this.tag)
            for(let prop in this.props){
                setAttr(el,prop,this.props[prop])
            }
            if(this.children){
                this.children.forEach(function(ch,i){
                    el.appendChild(ch.render())
                })

            }
        } else if(this.nodeType===3){
            el = document.createTextNode(this.text)
        } else if(this.nodeType===8){
            el = document.createComment(this.text)
        }
        el.key = this.key
        return el

    }
}

function setAttr(node,key,value){
    if(key==="style"){
        for(let val in value){
            node.style[val] = value[val]
        }
    } else {
        node.setAttribute(key,value)
    }
}

Diff

diff主要是用來對比新舊vnode的區(qū)別，找出區(qū)別的元素并記錄在directives對象上，便于接下來可以通過directives的內(nèi)容對舊的vnode進行替換，繪制新的DOM.

這是diff的入口方法，參數(shù)是舊的vnode和新的vnode,directives是用來記錄每個節(jié)點的改變情況的對象。

export default function diff(oldVNode, newVNode){
    directives = {}
    diffVNode(oldVNode,newVNode,directives)
    return directives

}

我們在diff方法中調(diào)用diffVNode來對節(jié)點進行逐一比較。首先，它會比較oldVNode和newVNode是否是相同的節(jié)點。如果相同，就對節(jié)點類型進行判斷，來選擇比較的方法，對于文本和注釋節(jié)點，只需要比較文本內(nèi)容是否相同即可，對于元素則要比較元素標簽，元素的屬性以及子元素是否相同。

function diffVNode(oldVNode,newVNode){

    if(newVNode && isSameTypeNode(oldVNode,newVNode)){
        if(newVNode.nodeType===3 || newVNode.nodeType===8){
            if(oldVNode.text !== newVNode.text){
                addDirectives(newVNode.key,{type:TEXT, content: newVNode.text})
            }
        } else if(newVNode.nodeType===1){
            if(oldVNode.tag === newVNode.tag && oldVNode.key == newVNode.key){
                var propPatches = diffProps(oldVNode.props, newVNode.props)
                if(Object.keys(propPatches).length>0){
                    addDirectives(newVNode.key,{type:PROP, content: propPatches})
                }
                if(oldVNode.children || newVNode.children)
                    diffChildren(oldVNode.children,newVNode.children,newVNode.key)
            }
        }
    }
    return directives
}

這是比較節(jié)點屬性的方法，對于有變化的屬性我們將變化的部分記在patches這個數(shù)組里。

function diffProps(oldProps,newProps){
    let patches={}
    if(oldProps){
        Object.keys(oldProps).forEach((prop)=>{
            if(prop === "style" && newProps[prop]){
                let newStyle = newProps[prop]
                let isSame = true
                Object.keys(oldProps[prop]).forEach((item)=>{
                    if(prop[item] !== newStyle[item]){
                        isSame = false
                    }
                })
                if(isSame){
                    Object.keys(newStyle).forEach((item)=>{
                        if(!prop.hasOwnProperty(item)){
                            isSame = false
                        }
                    })
                }
                if(!isSame)
                    patches[prop] = newProps[prop]
            }
            if(newProps[prop] !== oldProps[prop]){
                patches[prop] = newProps[prop]
            }
        })
    }
    if(newProps){
       Object.keys(newProps).forEach((prop)=>{
        if(!oldProps.hasOwnProperty(prop)){
            patches[prop] = newProps[prop]
        }
    })
   }
   
    return patches
}

下面是比較子節(jié)點的方法，子節(jié)點的更新分為增加子節(jié)點，刪除子節(jié)點和移動子節(jié)點三種操作。對于子節(jié)點的操作將被記錄在父節(jié)點的directives上。

function diffChildren(oldChildren,newChildren,parentKey){
    oldChildren = oldChildren || []
    newChildren = newChildren || []
    let movedItem = []
    let oldKeyIndexObject = parseNodeList(oldChildren)
    let newKeyIndexObject = parseNodeList(newChildren)
    for(let key in newKeyIndexObject){
        if(!oldKeyIndexObject.hasOwnProperty(key)){
            addDirectives(parentKey,{type:INSERT,index:newKeyIndexObject[key],node:newChildren[newKeyIndexObject[key]]})
        }
    }
    for(let key in oldKeyIndexObject){
        if(newKeyIndexObject.hasOwnProperty(key)){
            if(oldKeyIndexObject[key] !== newKeyIndexObject[key]){
                let moveObj = {"oldIndex":oldKeyIndexObject[key],"newIndex":newKeyIndexObject[key]}
                movedItem[newKeyIndexObject[key]] = oldKeyIndexObject[key]
            }
            diffVNode(oldChildren[oldKeyIndexObject[key]],newChildren[newKeyIndexObject[key]])
        } else {
            addDirectives(key,{type:REMOVE,index:oldKeyIndexObject[key]})
        }
    }
    if(movedItem.length>0){
        addDirectives(parentKey,{type:MOVE, moved:movedItem})
    }
    
}

在經(jīng)過Diff方法后，我們將得到我們傳入的oldNode與newNode的比較結(jié)果，并記錄在Directives對象中。

Patch

Patch主要做的是通過我們之前的比較得到的Directives對象來修改Dom樹。在Patch方法中如果該節(jié)點涉及到更新，將會調(diào)用applyPatch方法。

export default function patch(node,directives){
    if(node){
        var orderList = []
        for(let child of node.childNodes){

            patch(child,directives)
        }
        if(directives[node.key]){
            applyPatch(node,directives[node.key])
        }
    }

}

applyPatch方法主要對具體的Dom節(jié)點進行修改。根據(jù)directives的不同類型，調(diào)用不同的方法進行更新。

function applyPatch(node, directives){
    
    for(let directive of directives){
        switch (directive.type){
            case TEXT:
                setContent(node,directive.content)
                break
            case PROP:
                setProps(node,directive.content)
                break
            case REMOVE:
                removeNode(node)
                break
            case INSERT:
                insertNode(node,directive.node,directive.index)
            default:
                break
        }
        
    }
}

具體的更新方法是通過js來操作DOM節(jié)點進行操作。
完整代碼

推薦一個找vue,angular組件的輪子工廠