建造者模式笔记

1.工厂模式主要是为了创建对象实例或者类簇（抽象工厂），关心的是最终产出（创建）的是什么，不关心你创建的整个过程，仅仅需要知道你最终创建的结果

2.建造者模式目的也是为了创建对象，但是它更多的关心的是创建这个对象的整个过程，甚至于创建对象的每一个细节。

3.这种模式创建的对象更为复杂，或者说这种模式创建的对象是一个复合对象。

4.这种方式对于整体对象类的拆分无形中增加了结构的复杂性

简单卡片demo

card类

var Card =function(width){
	this.width=width;
}
Card.prototype={
	getWidth:function(){
		return this.width;
	}
}

图片类

var Imaged=function(imgurl,width){
	var that=this;
	(function(imgurl,width,that){
		that.img=document.createElement("img");
		that.img.src = imgurl;
		that.img.width = width;
	})(imgurl,width,that);
}

标题类

var titled=function(title){
	var that = this;
	(function(title,that){
		that.p=document.createElement("p");
		that.p.style.color="#999";
		that.p.innerHTML = title;
	})(title,that);
}

卡片建造者

var CardCreate=function(width,title,imgurl){
	var that=this;
	var _card=new Card(width);
	_card.title=new titled(title);
	_card.img=new Imaged(imgurl,width);
	(function(_card,that){
		that.div=document.createElement("div");
		that.div.style.width=_card.getWidth() + "px";
		that.div.style.border="1px solid gray";
		that.div.style.background="1px solid gray";
		that.div.style.float="left";
		that.div.style.margin="10px";
		console.log(that.div.style.width);
		that.div.appendChild(_card.img.img);
		that.div.appendChild(_card.title.p);
	})(_card,that);
	_card.div=that.div;
	return _card;
}

测试数据源

var data=[{width:"250",title:"我的卡片1",imgurl:"./img/1.gif"}, 
	{width:"250",title:"我的卡片2",imgurl:"./img/1.gif"},
	{width:"250",title:"我的卡片3",imgurl:"./img/1.gif"},
	{width:"250",title:"我的卡片4",imgurl:"./img/1.gif"},
	{width:"250",title:"我的卡片5",imgurl:"./img/1.gif"},
	{width:"250",title:"我的卡片6",imgurl:"./img/1.gif"},
];

测试代码

var con=document.getElementById("container");
for(var i=5;i>=0;i--){
	var card=new CardCreate(data[i].width,data[i].title,data[i].imgurl);
	con.appendChild(card.div);
}

css代码

*{padding:0;margin: 0;}
#container{width:1000px;margin: 100px auto;}
#container p{line-height: 30px;font-size: 14px;text-indent: 15px;}
div:after{display: block;content: ""; clear: both;}

html代码

<div id="container">
</div>

来源：博客园