本文例項講述了JavaScript組合設計模式--改進引入案例。分享給大家供大家參考，具體如下：

對於組合設計模式：

（1）組合模式中把物件分為兩種(組合物件,和葉子物件)
（2）組合物件和葉子物件實現:同一批操作
（3）對組合物件執行的操作可以向下傳遞到葉子節點進行操作
（4）這樣就會弱化類與類之間的耦合
（5）他常用的手法是把物件組合成屬性結構的物件

根據組合模式的這些特性我們改寫程式碼如下：

由於用到了介面檢驗所以我們先引入介面檔案程式碼

//定義一個靜態方法來實現介面與實現類的直接檢驗
//靜態方法不要寫出Interface.prototype,因為這是寫到介面的原型鏈上的
//我們要把靜態的函式直接寫到類層次上
//定義一個介面類
var Interface=function (name,methods) {//name：介面名字
  if(arguments.length<2){
    alert("必須是兩個引數")
  }
  this.name=name;
  this.methods=[];//定義一個空陣列裝載函式名
  for(var i=0;i<methods.length;i++){
    if(typeof methods[i]!="string"){
      alert("函式名必須是字串型別");
    }else {
      this.methods.push( methods[i]);
    }
  }
};
Interface.ensureImplement=function (object) {
  if(arguments.length<2){
    throw new Error("引數必須不少於2個")
    return false;
  }
  for(var i=1;i<arguments.length;i++){
    var inter=arguments[i];
    //如果是介面就必須是Interface型別
    if(inter.constructor!=Interface){
      throw new Error("如果是介面類的話，就必須是Interface型別");
    }
    //判斷介面中的方法是否全部實現
    //遍歷函式集合
    for(var j=0;j<inter.methods.length;j++){
      var method=inter.methods[j];//介面中所有函式

      //object[method]傳入的函式
      //最終是判斷傳入的函式是否與介面中所用函式匹配
      if(!object[method]||typeof object[method]!="function" ){//實現類中必須有方法名字與介面中所用方法名相同
        throw new Error("實現類中沒有完全實現介面中的所有方法")
      }
    }
  }
}

（1）統一介面

var composite=new Interface("composite",["getChildByName","add"]);//側重點獲取子
var student=new Interface("composite",["goToClass","finishClass"]);//側重點為每個物件的實現

（2）定義組合類

 var compositeObj=function (name) {
         this.name=name;
         this.type="com";//預設是組合類
         var childs=new Array();
        //得到相關的所有孩子節點
         this.getChildByName=function (name) {
           //涉及到遞迴
           var toChilds=new Array();
           if(!name){
             for(var i=0;i<childs.length;i++){
                if(childs[i].type=="com"){
                  toChilds=toChilds.concat(childs[i].getChildByName())
                }else {
                  toChilds.push(childs[i]);
                }
             }
           }else {
             for (var i = 0; i < childs.length; i++){
               if(childs[i].name==name){
                 if(childs[i].type=="com"){
                   toChilds=toChilds.concat(childs[i].getChildByName());
                   break;
                 }else {
                   toChilds.push(childs[i]);
                   break;
                 }
               }else {
                 if(childs[i].type == "com"){
                   toChilds =toChilds.concat(childs[i].getChildByName(name));
                 }
               }
             }
               }
               return toChilds;
         };
         //增加子節點
         this.add=function (child) {
           childs.push(child);
           return this;
         };
         //去上課
        this.goToClass=function (name) {
        var toChilds=this.getChildByName(name);
         for(var i=0;i<toChilds.length;i++){
              toChilds[i].goToClass();
         }
      };
          //下課
         this.finishClass=function (name) {
      var toChilds=this.getChildByName(name);
      for(var i=0;i<toChilds.length;i++){
        toChilds[i].finishClass();
      }
    };
    Interface.ensureImplement(this,composite,student);
    };

（3）定義葉子類

  var studentObj=function (name) {
    this.name=name;
    this.type="student";//預設是葉子
    //得到所有孩子節點
   this.getChildByName=function (name) {
     if(this.name==name){
       return this;
     }else {
       return null;
     }
   }
   //增加子節點
    this.add=function (child) {
      throw new Error("add 不成被初始化(在葉子了中)")
    }
    //去上課
    this.goToClass = function(name){
      document.write(this.name +" 去上課<br>");
    }
    //下課
    this.finishClass = function(name){
      document.write(this.name +" 下課<br>");
    }
    Interface.ensureImplement(this,student);
  }

（4）應用---將學校，班級，組，學生關聯起來

 var astudent=new studentObj("我是a同學");
  var bstudent=new studentObj("我是b同學");
  var cstudent=new studentObj("我是c同學");
  var dstudent=new studentObj("我是d同學");
  var estudent=new studentObj("我是e同學");
  var fstudent=new studentObj("我是f同學");
  var gstudent=new studentObj("我是g同學");
  var hstudent=new studentObj("我是h同學");
  var istudent=new studentObj("我是i同學");

  var one = new compositeObj("一班");
  var oneOne = new compositeObj("一班一組");
  oneOne.add(astudent).add(bstudent);
  var oneTwo = new compositeObj("一班二組");
  oneTwo.add(cstudent).add(dstudent);

  one.add(oneOne).add(oneTwo);
  var two = new compositeObj("二班");
  var twoOne = new compositeObj("二班一組");
  twoOne.add(estudent).add(fstudent);
  var twoTwo = new compositeObj("二班二組");
  twoTwo.add(gstudent).add(hstudent).add(istudent)
  two.add(twoOne).add(twoTwo);
  var usPcat = new compositeObj("組合設計模式培訓學校");
  usPcat.add(one).add(two);

（5）客戶端呼叫API,只需要簡單的安排去上課即可，也就是客戶端只需要寫去上課的程式碼即可

usPcat.goToClass();
document.write("-------------------------<br>");
usPcat.goToClass("一班");
document.write("-------------------------<br>");
usPcat.goToClass("二班一組");

感興趣的朋友可以使用線上HTML/CSS/JavaScript程式碼執行工具：http://tools.jb51.net/code/HtmlJsRun測試上述程式碼執行效果。

更多關於JavaScript相關內容感興趣的讀者可檢視本站專題：《javascript面向物件入門教程》、《JavaScript錯誤與除錯技巧總結》、《JavaScript資料結構與演算法技巧總結》、《JavaScript遍歷演算法與技巧總結》及《JavaScript數學運算用法總結》

希望本文所述對大家JavaScript程式設計有所幫助。