javascript-建造者模式

建造者模式笔记

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代码

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

html代码

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

浏览器显示截图