console
function Element(tag, props, children){
this.tag = tag;
this.props = props;
this.children = children;
}
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){
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;
}