使用場景 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設計模式與開發時間》，曾探，中國工信出版集團.

?

轉載于:https://www.cnblogs.com/yijingzheng/p/10231011.html

總結

以上是生活随笔為你收集整理的JavaScript设计模式总结-组合模式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。