vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > Virtual DOM实现

帮助我们高效操作的Virtual DOM简单实现

作者:AshleyLv

这篇文章主要为大家介绍了帮助我们高效操作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节点进行操作。

完整代码

以上就是Virtual DOM简单实现的详细内容,更多关于Virtual DOM简单实现的资料请关注脚本之家其它相关文章!

您可能感兴趣的文章:
阅读全文