Virtual DOM的简单实现

之前在看vue的源码时了解了vue关于Virtual DOM的一些想法,Virtual DOM可以帮助我们更高效的操作DOM。它通过实现一个vnode的js对象，vnode的对象与dom的node对象是一一对应的，通过我们对vnode的操作可以实现对dom的操作，这样就可以避免频繁的dom操作带来的效率问题。vue的Virtual DOM实现了一套高效的diff算法来快速的比对更新dom树。

关于vue的Virtual DOM实现原理将在后面的文章中提到。为了方便理解和学习，我写了一个简单的Virtual DOM操作DOM树的demo。这里是完整代码以及DOM

VNode

首先，创建vnode的对象，vnode记录相应的DOM对象的一些属性。

export default class VNode {

    constructor (tag, nodeType,key, props, text, children){
        this.tag = tag //element类型
        this.nodeType = nodeType //node类型，1为普通节点，3为文本节点，8为注释
        this.key = key
        this.props = props //node的属性
        this.text = text //文本节点的内容
        this.children = children//子节点
    }
    //将vnode渲染成DOM节点的方法
    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的区别，找出区别的元素并记录在directives对象上，便于接下来可以通过directives的内容对旧的vnode进行替换，绘制新的DOM.

这是diff的入口方法，参数是旧的vnode和新的vnode,directives是用来记录每个节点的改变情况的对象。

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

}

我们在diff方法中调用diffVNode来对节点进行逐一比较。首先，它会比较oldVNode和newVNode是否是相同的节点。如果相同，就对节点类型进行判断，来选择比较的方法，对于文本和注释节点，只需要比较文本内容是否相同即可，对于元素则要比较元素标签，元素的属性以及子元素是否相同。

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
}

这是比较节点属性的方法，对于有变化的属性我们将变化的部分记在patches这个数组里。

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
} 

下面是比较子节点的方法，子节点的更新分为增加子节点，删除子节点和移动子节点三种操作。对于子节点的操作将被记录在父节点的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})
    }
    
}

在经过Diff方法后，我们将得到我们传入的oldNode与newNode的比较结果，并记录在Directives对象中。

Patch

Patch主要做的是通过我们之前的比较得到的Directives对象来修改Dom树。在Patch方法中如果该节点涉及到更新，将会调用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节点进行修改。根据directives的不同类型，调用不同的方法进行更新。

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节点进行操作。
完整代码

推荐一个找vue,angular组件的轮子工厂