使用場景 1、對象存在整體-部分的結(jié)構(gòu)，如樹、數(shù)組等； 2、使用者希望對數(shù)據(jù)結(jié)構(gòu)中的所有對象統(tǒng)一處理。

?

需要注意的是 1、組合模式所謂的結(jié)構(gòu)并非“繼承”，而是“包含”； 2、葉子節(jié)點、父節(jié)點、根節(jié)點的所有方法及屬性要設(shè)計一致，對于某些不一致的地方可以通過拋出錯誤來提示； 3、若子節(jié)點映射多個父節(jié)點，則該模式不適用。

?

舉例

以文件遍歷、刪除來說明，先定義一個文件夾類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();}); }; 定義一個刪除方法，這個方法是從節(jié)點的父節(jié)點中移除 Folder.prototype.remove = function() {if(!this.parent) { // 若為根節(jié)點，則不能移除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; }; 為了保證各層級節(jié)點的操作一致，需要定義add()方法，然而文件是不能執(zhí)行這種操作的，因此在這里拋出錯誤來提示。 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('學(xué)習(xí)資料'); const folder1 = new Folder('Javascript'); const file1 = new Folder('深入淺出node.js'); folder1.add(new File('JavaScript設(shè)計模式與開發(fā)實踐)); folder.add(folder1); folder.add(file); folder1.remove(); folder.scan(); 思考 作為業(yè)務(wù)開發(fā)人員，其實這個模式基本用不上，如果服務(wù)端返回一個樹狀的菜單結(jié)構(gòu)，難道還遍歷一下數(shù)據(jù)，全部重新定義一遍節(jié)點？ 顯然不太合理，況且服務(wù)端返回的數(shù)據(jù)量可能產(chǎn)生變化，隨著業(yè)務(wù)的逐步發(fā)展，數(shù)據(jù)變得越來越龐大，遍歷所產(chǎn)生的開銷還是不可忽視。 若自己做一個后臺系統(tǒng)框架的通用的左側(cè)列表功能，結(jié)合VueRouter的多層嵌套，可以試試用這種方式。 目前還是沒有什么動力來寫個框架。

參考文獻(xiàn)：

[1] 《JavaScript設(shè)計模式與開發(fā)時間》，曾探，中國工信出版集團(tuán).

?

轉(zhuǎn)載于:https://www.cnblogs.com/yijingzheng/p/10231011.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。