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());
