Virtual-Dom

Virtual-Dom

virtual-dom是一种利用JavaScript构建dom的技术，主要解决了复杂应用程序的维护程度。浏览器在处理dom时，总会附加很多很多属性，这会使得每一次数据更新，渲染都会很慢。Virtual-dom利用JavaScript做了中间层，JS记录状态，将每一次状态中的变化同步到视图中。

//节点构造函数
//if条件判断调用方式
function Dom(tagName,prop,childs){
    if(!(this instanceof Dom)){
        return new Dom(tagName,prop,childs);
    }
    this.tagName = tagName ; 
    this.prop = prop ;
    this.childs = childs ;
}
 
//节点处理
Dom.prototype.render = function(){
    var domTag = document.createElement(this.tagName);
    var props = this.prop ;
    var domProp = Object.keys(props);
    domProp.forEach(function(prop){
        domTag.setAttribute(prop,props[prop]);
    });
         
    //判断子节点是文本节点还是虚拟的Dom节点
    var childs = this.childs ||[];
    childs.forEach(function(child){
        var childNode = (child instanceof Dom) ? child.render() : document.createTextNode(child);
        domTag.append(childNode);
    });
 
    return domTag;
}
 
//调用构造函数
var node = new Dom('ul',{'id':'ul'},[
      Dom('li', {'class': 'item'}, ["Item 1"]),
      Dom('li', {'class': 'item'}, ["Item 2"]),
      Dom('li', {'class': 'item'}, ["Item 3"])
    ])
     
document.body.append(node.render());