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=[{"250",title:"我的卡片1",imgurl:"./img/1.gif"},
                   {"250",title:"我的卡片2",imgurl:"./img/1.gif"},
                   {"250",title:"我的卡片3",imgurl:"./img/1.gif"},
                   {"250",title:"我的卡片4",imgurl:"./img/1.gif"},
                   {"250",title:"我的卡片5",imgurl:"./img/1.gif"},
                   {"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>

浏览器显示截图