使用場景 1、物件存在整體-部分的結構，如樹、陣列等； 2、使用者希望對資料結構中的所有物件統一處理。

 

需要注意的是 1、組合模式所謂的結構並非“繼承”，而是“包含”； 2、葉子節點、父節點、根節點的所有方法及屬性要設計一致，對於某些不一致的地方可以通過丟擲錯誤來提示； 3、若子節點對映多個父節點，則該模式不適用。

 

舉例

以檔案遍歷、刪除來說明，先定義一個資料夾類Folder

const Folder = function(name) {
  this.name = name;
  this
 
.parent = null;
  this.files = [];
};
Folder.prototype.add = function(file) {
  file.parent = this;
  this.files.push(file);
};
Folder.prototype.scan = function() {
  console.log('掃描資料夾：', this.name);
  this.files.forEach(file => {
    file.scan();
  });
};

定義一個刪除方法，這個方法是從節點的父節點中移除

Folder.prototype.remove = function() {
  
 
if(!this.parent) { // 若為根節點，則不能移除
    return;
  };
  this.parent.files.forEach((file, index) => {
    if(file === this) {
      file.splice(index, 1);
    }
  });
};

檔案類File同上

const File = function(name) {
  this.name = name;
  this.parent = null;
};

為了保證各層級節點的操作一致，需要定義add()方法，然而檔案是不能執行這種操作的，因此在這裡丟擲錯誤來提示。

File.prototype.add = function() {
  
 
throw new Error('不能在檔案下新增');
};
File.prototype.scan = function() {
  console.log('掃描檔案：', this.name);
};
File.prototype.remove = function() {
  if(!this.parent) {
    return;
  }
  this.parent.files.forEach((file, index) => {
    if (file === this) {
      file.splice(index, 1);
    }
  });
};

使用示例

const folder = new Folder('學習資料');
const folder1 = new Folder('Javascript');
const file1 = new Folder('深入淺出node.js');
folder1.add(new File('JavaScript設計模式與開發實踐));
folder.add(folder1);
folder.add(file);
folder1.remove();
folder.scan();

    思考 作為業務開發人員，其實這個模式基本用不上，如果服務端返回一個樹狀的選單結構，難道還遍歷一下資料，全部重新定義一遍節點？ 顯然不太合理，況且服務端返回的資料量可能產生變化，隨著業務的逐步發展，資料變得越來越龐大，遍歷所產生的開銷還是不可忽視。 若自己做一個後臺系統框架的通用的左側列表功能，結合VueRouter的多層巢狀，可以試試用這種方式。 目前還是沒有什麼動力來寫個框架。  

參考文獻：

[1] 《JavaScript設計模式與開發時間》，曾探，中國工信出版集團.