virtual dom

patch(container,vnode)

function createElement(vnode){
    var tag = vnode.tag;
    var attrs = vnode.attrs || {};
    var children = vnode.children || [];
    if(!tag){
        return null;
    }
    var elem = document.createElement(tag);
    var attrName;
    for(attrName in attrs){
        if(attrs.hasOwnProperty(attrName)){
            elem.setAttribute(attrName,attrs[attrName]);
        }
    }
    children.forEach((childVnode)=>{
        elem.appendChild(createElement(childVnode));
    })
    return elem;
}

patch(vnode,newVnode)

function updateChildren(vnode,newVnode){
    var children = vnode.children || [];
    var newChildren = newVnode.children || [];
    children.forEach(function(child,index){
        var newChild = newChildren[index];
        if(newChild==null){
            return;
        }
        if(child.tag===newChild.tag){
            updateChildren(child,newChild);
        }else{
            repalceNode(child,newChild);
        }
    })
}