var bankLogo = function(bankClassName){
this.element = document.createElement("a");
this.element.className = bankClassName;
Interface.regImplement(this,IcardItem);
};
bankLogo.prototype ={
showBank:function(){
this.element.style.display ="block";
},
hideBank:function(){
this.element.style.display ="none";
},
getElement:function(){
return this.element;
}
};
最后设置一个单体对象，将操作银行的相关信息形成一个模块，方便调用：
复制代码 代码如下:
var BankAction ={
bankList:[],
addBank:function(card){
this.bankList.push(card);
},
innerBank:function(conId){
for(i=0;len=this.bankList.length,i<len;i++){
var cardObj =this.bankList[i].getElement();
}
document.getElementById(conId).appendChild(cardObj);
}
};
到了实现环节了，实例化生成一个包含所有卡的最外层容器，然后根据卡类，分别生成一个放置银行卡和卡通卡的容器，最后生成各银行卡的实例，并按层级关系形成DOM结构：
复制代码 代码如下:
var bankDivT = new cardMain("PayCard");//创建最外层容器
var ebankCard = new cardMain("ebankCard");//创建网银类银行卡容器
var ktCard = new cardMain("ktCard");//创建卡通类银行卡容器
var ccbBank = new bankLogo('Ebank-CMB');//创建招行银行卡
var abcBank = new bankLogo('Ebank-ABC');//创建农行银行卡
var abcKtBank = new bankLogo('Kt-ABC');//创建卡通农行卡
ebankCard.add(ccbBank);
ebankCard.add(abcBank);
ktCard.add(abcKtBank);
bankDivT.add(ebankCard);
bankDivT.add(ktCard);
BankAction.addBank(bankDivT);
BankAction.innerBank("bankList");
将动态生成的银行列表，DOM结构形如：
复制代码 代码如下:
<div>
<div>
<a></a>
<a></a>
</div>
<div>
<a></a>
</div>
</div>
组合模式应用在动态生成用户界面的时候，是非常不错的选择，他可以很大程度的简化粘合性代码，提升维护性。不过还是要慎用，毕竟当叶子对象很多的时候，递归还是存在性能上的问题。
Javascript设计模式之装饰者模式
装饰者模式：可以不创建新的子类，给对象创建新的功能。举例说明：支付宝收银台红包结合余额付款的应用场景。
var Ieconomics = new Interface("ieconomics",[["getPrice"]]);
首先创建一个组件类，基与该组件实例化的对象，会被作为参数传递给装饰者类，以便装饰者调用到该组件中的各方法。
复制代码 代码如下:
var economic = function(){
Interface.regImplement(this,Ieconomics);
};
economic.prototype={
getPrice:function(){
//代码实现
}
};
然后创建一个装饰者抽象类，作为派生装饰者选件类的父类：
复制代码 代码如下:
var economicsDecorator = function(economic){
this.economic = economic;
this.regImplement(economic,Ieconomics);
};
economicsDecorator.prototype={
getPrice:function(){
return this.economic.getPrice();
}
};
最后基于上面这个抽象类，派生出一个装饰者选件类：
复制代码 代码如下:
//红包装饰者选件类
var coupon = function(economic){
//调用装饰着抽象类的构造函数
economicsDecorator.call(this,economic);
};
extend(coupon,couponDecorator);
coupon.prototype=function(){
//改写getPrice方法
getPrice:function(){
return this.economic.getPrice() - this.getCoupon();
},
getCoupon:function(){
//获取红包总价具体实现
}
};
var myCoupon = new economic();
myCoupon = new coupon(myCoupon);
实现装饰者模式就是这么简单，首先创建一个组件的实例myCoupon，然后将该对象作为参数传递给装饰者选件类coupon。你会发现两句代码中我都把值赋给了变量myCoupon，这是因为他们都实现了同一个接口类，他们之间是可以互换使用的。
看到这里心细的同学可能会发现，我们在coupon类中新增了一个getCoupon方法，目前来看不会有任何问题，但是如果我们继续创建一个购物卷装饰者选件类，然后结合红包一起用呢？
复制代码 代码如下: