javascript-建造者模式

时间:2022-08-22 17:38:10

建造者模式笔记

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

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

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

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

简单卡片demo

card类

1         var Card =function(width){
2              this.width=width;
3          }
4          Card.prototype={
5              getWidth:function(){
6                  return this.width;
7              }
8          }

图片类

1        var Imaged=function(imgurl,width){
2              var that=this;
3              (function(imgurl,width,that){
4                  that.img=document.createElement("img");
5                  that.img.src = imgurl;
6                  that.img.width = width;
7                  
8              })(imgurl,width,that);
9          }

标题类

1         var titled=function(title){
2              var that = this;
3              (function(title,that){
4                  that.p=document.createElement("p");
5                  that.p.style.color="#999";
6                  that.p.innerHTML = title;
7                  
8              })(title,that);
9          }

卡片建造者

 1         var CardCreate=function(width,title,imgurl){
 2              var that=this;
 3              var _card=new Card(width);
 4              _card.title=new titled(title);
 5              _card.img=new Imaged(imgurl,width);
 6              (function(_card,that){
 7                  that.div=document.createElement("div");
 8                  that.div.style.width=_card.getWidth() + "px";
 9                  that.div.style.border="1px solid gray";
10                  that.div.style.background="1px solid gray";
11                  that.div.style.float="left";
12                  that.div.style.margin="10px";
13                  console.log(that.div.style.width);
14                  that.div.appendChild(_card.img.img);
15                  that.div.appendChild(_card.title.p);
16              })(_card,that);
17              _card.div=that.div;
18              return _card;
19          }

测试数据源

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

测试代码

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

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

1         <div id="container">
2             
3         </div>

浏览器显示截图

javascript-建造者模式