vue dom diff算法

最新推荐文章于 2022-01-14 20:32:25 发布

niuyueyang

最新推荐文章于 2022-01-14 20:32:25 发布

阅读量175

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/qq_33332184/article/details/106495637

版权

vue 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>dom diff算法</title>
</head>
<body>
    <div id="root"></div>
    <script src="js/element.js"></script>
    <script src="js/diff.js"></script>
    <script src="js/patch.js"></script>
    <script>
        /*
        let virtualDom = createElement('ul', {class: 'list'}, [
                createElement('li', {class: 'item'}, ['a']),
                createElement('li', {class: 'item'}, ['b']),
                createElement('li', {class: 'item'}, ['c']),
            ]
        )
        renderDom(render(virtualDom), document.getElementById('root'))
        */
        let virtualDom1 = createElement('ul', {class: 'list'}, [
                createElement('li', {class: 'item'}, ['a1']),
                createElement('li', {class: 'item'}, ['b']),
                createElement('li', {class: 'item'}, ['c1']),
            ]
        )
        let virtualDom2 = createElement('ul', {class: 'list1'}, [
                createElement('li', {class: 'item'}, ['1']),
                createElement('li', {class: 'item'}, ['b']),
                createElement('div', {class: 'item'}, ['3']),
            ]
        )
        let el = render(virtualDom1);
        renderDom(el, document.getElementById('root'))
        let patchs = diff(virtualDom1, virtualDom2);
        // 将差异element放到页面中
        patchRender(el, patchs)
    </script>
</body>
</html>

element.js

/*
* @desc 创建标签
* @params
* {String} type 属性类型
* {Object} props 属性值
* {Array} children 子集
* */
class Element{
    constructor(type, props, children) {
        this.type = type;
        this.props = props;
        this.children = children;
    }
}

// eslint-disable-next-line no-unused-vars
/*
* @desc 创建标签
* @params
* {String} type 属性类型
* {Object} props 属性值
* {Array} children 子集
* */
function createElement(type, props, children) {
    return new Element(type, props, children)
}

/*
* @desc 设置属性
* @params
* {Element} node 当前标签
* {String} key 属性
* {String, ...} value 属性值
* */
function setAttr(node, key, value) {
    switch(key){
        case 'value':
            if(node.tagName.toLowerCase() === 'input' || node.tagName.toLowerCase() === 'textarea'){
                node.value = value
            }
            else{
                node.setAttribute(key, value)
            }
            break;
        case 'style':
            node.style.cssText = value;
            break;
        default:
            node.setAttribute(key, value);
            break;
    }

}

// eslint-disable-next-line no-unused-vars
/*
* @desc 创建标签，并且设置属性
* @params
* {Object} eleobj 虚拟树
* */
function render(eleobj) {
    let el = document.createElement(eleobj.type);
    for(let key in eleobj.props){
        setAttr(el, key, eleobj.props[key])
    }
    eleobj.children.forEach(child => {
        child = (child instanceof Element) ? render(child) : document.createTextNode(child);
        el.appendChild(child);
    })
    return el;
}

// eslint-disable-next-line no-unused-vars
/*
* @desc 将渲染好的标签添加到页面中
* @params
* {Element} el 渲染好的树
* {Element} target 目标位置
* */
function renderDom(el, target) {
    target.appendChild(el)
}

diff.js

/*
* @desc diff算法
* @params
* {Object} oldTree 旧树
* {Object} newTree 新树
* @return
* {Object} 补丁包
* @example
* {1: [], 2: []}
* */
function diff(oldTree, newTree) {
    let patches = {};
    let index = 0;
    // 对比
    walk(oldTree, newTree, index, patches)
    return patches;
}

/*
* @desc 对比属性
* @params
* {Object} oldAttrs 旧属性
* {Object} newAttrs 新属性
* @return
* {Object} 返回带有差异的属性
* */
function diffAttr(oldAttrs, newAttrs) {
    let obj = {};
    for(let key in oldAttrs){
        let newAttr = newAttrs[key];
        let oldAttr = oldAttrs[key];
        if(newAttr !== oldAttr){
            obj[key] = newAttr; // 如果新属性上某一个属性被删除，则为undefined
        }
    }
    // 以下为旧属性没有，新属性有值
    for(let key in newAttrs){
        let newAttr = newAttrs[key];
        if(!oldAttrs.hasOwnProperty(key)){
            obj[key] = newAttr;
        }
    }
    return obj;
}

/*
* @desc 对比新旧树子节点
* @params
* {Array} oldChildren 旧子节点
* {Array} newChildren 新子节点
* {Object} patches 两棵树子元素的差异
* */
let Index = 0;
function diffChildren(oldChildren, newChildren, patches) {
    oldChildren.forEach((child, idx) => {
        walk(child, newChildren[idx], ++Index, patches)
    })
}

/*
* @desc 判断是否为为文本节点
* @params
* {Element} node 要判断的元素
* */
function isString(node) {
    return Object.prototype.toString.call(node) === '[object String]'
}

/*
* @desc 将两棵树差异返出来
* @params
* {Object} oldTree 旧树
* {Object} newTree 新树
* {Number} index 当前children的下标
* {Object} patches 两棵树的差异
* */
function walk(oldTree, newTree, index, patches) {
    let currentPath = [];
    // 节点被删除
    if(!newTree){
        currentPath.push({type: 'REMOVE', index})
    }
    // 判断是否是文本节点
    else if(isString (oldTree) && isString(newTree)){
        if(oldTree !== newTree){
            currentPath.push({type: 'TEXT', text: newTree})
        }
    }
    // 节点标签完全一样
    else if(oldTree.type === newTree.type){
        // 比较属性是否有更改
        let attrs = diffAttr(oldTree.props, newTree.props);
        if(Object.keys(attrs).length > 0){
            currentPath.push({type: 'ATTRS', attrs})
        }
        // 如果有子节点，遍历子节点
        diffChildren(oldTree.children, newTree.children, patches)
    }
    // 节点被替换
    else{
        currentPath.push({type: 'REPLACE', newTree})
    }
    // 当前元素有差异
    if(currentPath.length > 0){
        patches[index] = currentPath
    }
}

patch.js

/*
* @desc 将两棵树差异性放到页面中
* @params
* {Element} el 将旧virtualDom转化为element
* {Object} patches 新旧两棵树差异
* @example
* patches:   {0: [attrs: {class: "list1"},type: "ATTRS"], 2: Array(1), 6: [text: "3",type: "TEXT"]}
* */

let allPatches;
let index = 0; // 默认哪个属性需要打补丁
function patchRender(el, patches) {
    console.log(patches)
    allPatches = patches;
    walkRender(el)
}

/*
* @desc 渲染子节点
* @params
* {Element} node 旧有的dom
* */

function walkRender(node) {
    // 将patches里面的0,1,2...当做key值，取出对应数组
    let currentPath = allPatches[index++];
    let childNodes = node.childNodes;
    childNodes.forEach(child => {
        walkRender(child)
    })
    if(currentPath){
        doPath(node, currentPath)
    }
}

/*
* @desc 设置属性
* @params
* {Element} node 当前标签
* {String} key 属性
* {String, ...} value 属性值
* */
function setAttr(node, key, value) {
    switch(key){
        case 'value':
            if(node.tagName.toLowerCase() === 'input' || node.tagName.toLowerCase() === 'textarea'){
                node.value = value
            }
            else{
                node.setAttribute(key, value)
            }
            break;
        case 'style':
            node.style.cssText = value;
            break;
        default:
            node.setAttribute(key, value);
            break;
    }

}

/*
* @desc 将不定渲染到页面中
* @params
* {Element} node 旧有的dom
* {Array} patches 每一级对应不定数组
* */
function doPath(node, patches) {
    console.log(patches)
    patches.forEach(patch => {
        switch (patch.type){
            case 'ATTRS':
                for(let key in patch.attrs){
                    let value = patch.attrs[key];
                    if(value){
                        setAttr(node, key, value)
                    }
                    else{
                        node.removeAttribute(key)
                    }
                }
                break;
            case 'TEXT':
                node.textContent = patch.text;
                break;
            case 'REPLACE':
                let newNode = (patch.newTree instanceof Element) ? render(patch.newTree) : document.createTextNode(patch.newTree);
                node.parentNode.replaceChild(newNode, node)
                break;
            case 'REMOVE':
                node.parentNode.removeChild(node);
                break;
            default:
                break;
        }
    })
}