小议javascript设计模式（4）

Javascript设计模式之组合模式

组合模式：运用该设计模式可以通过组合对象添加属性和方法，通过递归批量式的让叶子对象得到组合对象的属性和方法。打个比方我们现在要动态创建一个银行列表，按银行类型分为网上银行类，卡通银行类，并可配置他们是否显示。用组合模式如何实现呢？

第一步还是先定义接口，因为要做到某类银行甚至某个银行是否显示可配置，那么我们先约定2个接口，showBank和hideBank。

var IcardItem = new Interface(”icardItem”,[["showBank"],["hideBank"]]); 

接下来先定义卡的组合对象，并设置组合对象的基本方法add,remove,getChild,由于这个类继承了IcardItem接口类，所以还定义了showBank,hideBank这两个接口方法。

var cardMain = function(id){ 
      this.cards = []; 
      this.element = document.createElement("div"); 
      this.element.id = id; 
      Interface.regImplement(this,IcardItem); 
    }; 
    cardMain.prototype = { 
      add:function(card){ 
          this.cards.push(card); 
          this.element.appendChild(card.getElement()); 
      }, 
      remove:function(card){ 
        for(i=0;len=this.cards.length,i<len;i++){ 
          if(cards[i] == card){ 
            this.cards.splice(i,1); 
            break; 
          }    
          this.element.removeChild(card.getElement()); 
        }  
      }, 
      getChild:function(i){ 
          return this.cards[i]; 
      }, 
      getElement:function(){ 
          return this.element;  
      }, 
      showBank:function(){ 
         this.element.style.display ="block"; 
        for(i=0;len=this.cards.length,i<len;i++){ 
            this.cards[i].showBank(); 
        } 
      }, 
      hideBank:function(){ 
        this.element.style.display ="none"; 
        for(i=0;len=this.cards.length,i<len;i++){ 
            this.cards[i].hideBank(); 
        } 
      } 
    };

然后定义叶子对象类bankLogo用以创建银行logo，这里银行logo都以带class的a标签标识：

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 id="PayCard"> 
      <div id="ebankCard"> 
       <a class="Ebank-CMB"></a> 
       <a class="Ebank-ABC"></a> 
      </div> 
      <div id="ktCard"> 
       <a class="Kt-ABC"></a> 
      </div> 
    </div>

组合模式应用在动态生成用户界面的时候，是非常不错的选择，他可以很大程度的简化粘合性代码，提升维护性。不过还是要慎用，毕竟当叶子对象很多的时候，递归还是存在性能上的问题。