文享日志

Virtual-Dom之构建dom树

JavaScript HTML

发表于2018年02月18日10:44:09

更新于2018年02月26日23:49:16

0条评论 112次阅读

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


👍 0  👎 0
共有0条评论

发表新评论

提交

广告展示

腾讯云推广 阿里云推广