基于节点的 Diff 算法

16 篇文章 1 订阅
13 篇文章 0 订阅

该算法比较新旧两个节点的差异,在最大程度复用旧节点的基础上把旧节点更新为新节点。

该算法的策略和 React 的 tree diff 一样,只比较同级节点,并且不移动节点,应该说不需要移动节点,因为新节点已经是真实的节点,而不是虚拟的节点。

function diff(oldNode,newNode){

    if(oldNode.isEqualNode(newNode)){
        return;
    }

    if(oldNode.nodeName!==newNode.nodeName){
        oldNode.parentNode.replaceChild(newNode,oldNode);
        return;
    }

    if(newNode.nodeType === 3){
        if(oldNode.nodeType === 3){
            oldNode.nodeValue = newNode.nodeValue;
        }else{
            oldNode.parentNode.replaceChild(newNode,oldNode);
        }
        return;
    }

    if(oldNode.nodeType === 3){
        if(newNode.nodeType === 3){
            oldNode.nodeValue = newNode.nodeValue;
        }else{
            oldNode.parentNode.replaceChild(newNode,oldNode);
        }
        return;
    }

    let oldNodeAttr = Array.from(oldNode.attributes);
    let newNodeAttr = Array.from(newNode.attributes);

    let oldNodeAttrSameIndex = {};
    let newNodeAttrSameIndex = {};
    
    for(let i=0,len=oldNodeAttr.length;i<len;i++){

        for(let n=0,length = newNodeAttr.length;n<length;n++){
            if(oldNodeAttr[i].isEqualNode(newNodeAttr[n])){
                oldNodeAttrSameIndex[i] = true;
                newNodeAttrSameIndex[n] = true;
            }
        }

        if(!oldNodeAttrSameIndex.hasOwnProperty(i)){
            oldNode.removeAttribute(oldNodeAttr[i].nodeName);
        }
    }

    for(let i=0,len=newNodeAttr.length;i<len;i++){
        if(newNodeAttrSameIndex[i]!==true){
            oldNode.setAttribute(newNodeAttr[i].nodeName,newNodeAttr[i].nodeValue);
        }
    }

    let newChildNodeList = Array.from(newNode.childNodes);
    let oldChildNodeList = Array.from(oldNode.childNodes);

    let newNodeLength = newChildNodeList.length;
    let oldNodeLength = oldChildNodeList.length;


    if(oldNodeLength > newNodeLength){

        for(let i=0;i<oldNodeLength;i++){
            if(newChildNodeList[i]!==undefined){
                diff(oldChildNodeList[i],newChildNodeList[i]);
            }else{
                oldNode.removeChild(oldChildNodeList[i]);
            }
        }

    }else{

        for(let i=0;i<newNodeLength;i++){
            if(oldChildNodeList[i]!==undefined){
                diff(oldChildNodeList[i],newChildNodeList[i]);
            }else{
                oldNode.appendChild(newChildNodeList[i]);
            }
        }

    }
    
}

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值