SOURCE

console 命令行工具 X clear

                    
>
console
// Element构造函数, 虚拟DOM的定义
function Element(tag, props, children){
    this.tag = tag;
    this.props = props;
    this.children = children;
}

// 由虚拟DOM返回真实DOM
Element.prototype.render = function(){
    let that = this
    if(!that || !that.tag){
        return null
    }
    let el = document.createElement(this.tag)
    for(let key in this.props){
        el.setAttribute(key, this.props[key])
    }
    if(that.children){
        for(let i = 0; i < that.children.length; i++){
            let child = that.children[i]
            let childEl = child instanceof Element ? child.render() : document.createTextNode(child)
            el.appendChild(childEl)
        }
    }
    return el
}

const diff = function(oldEl, newEl){
    
}

let res = []
const diffNormal = function(oldEl, newEl){
    console.log(oldEl.children, newEl.children)
    if(!oldEl && !newEl){
        return 
    }
    let length = Math.max(oldEl.children.length, newEl.children.length)

    for(let i = 0; i < length; i++){
        let before = oldEl.children[i]
        let after = newEl.children[i]
        
        if(before === undefined){
            // add
            res.push({type: 'add', node: after})
        }else if(after === undefined){
            res.push({type: 'delete', node: before})
        }else if(before.tagName !== after.tagName){
            res.push({type: 'delete', node: before})
            res.push({type: 'add', node: after})
        }else if(before.innerHTML !== after.innerHTML){
            res.push({
                type: 'change',
                beforeNode: before,
                afterNode: after,
                HTML: after.innerHTML
            })
        }else{
            diffNormal(before, after)
        }
    }
    return res
}

//测试
let el = new Element('div', { id: 'container' }, [
  new Element('h1', { style: 'color: blue' }, ['simple virtal dom']),
  new Element('p', {}, ['Hello, virtual-dom']),
  new Element('ul', {}, [new Element('li')]),
]);
let dom = el.render()
document.body.appendChild(dom)

let newTree = new Element('div', { id: 'container' }, [
  new Element('h1', { style: 'color: red' }, ['simple virtal dom']),
  new Element('p', {}, ['Hello, virtual-dom']),
  new Element('ul', {}, [new Element('li'), new Element('li')]),
]);

let xx = diffNormal(el, newTree)
console.log(xx)
<body>
</body>
#list{
    background-color: yellow;
}
.item{
    color: red;
}