JavaScript組合模式Composite Pattern
組合模式（Composite Pattern），又叫部分整體模式，是用于把一組相似的對象當作一個單一的對象。
組合模式依據(jù)樹形結(jié)構(gòu)來組合對象，用來表示部分以及整體層次。這種類型的設計模式屬于結(jié)構(gòu)型模式，它創(chuàng)建了對象組的樹形結(jié)構(gòu)。
樹對象和葉對象接口統(tǒng)一，樹對象增加一個緩存數(shù)組，存儲葉對象。執(zhí)行樹對象方法時，將請求傳遞給其下葉對象執(zhí)行。
// 樹對象 - 文件目錄
class CFolder {
constructor(name) {
this.name = name;
this.files = [];
}
add(file) {
this.files.push(file);
}
scan() {
for (let file of this.files) {
file.scan();
}
}
}
// 葉對象 - 文件
class CFile {
constructor(name) {
this.name = name;
}
add(file) {
throw new Error('文件下面不能再添加文件');
}
scan() {
console.log(`開始掃描文件：${this.name}`);
}
}
let mediaFolder = new CFolder('娛樂');
let movieFolder = new CFolder('電影');
let musicFolder = new CFolder('音樂');
let file1 = new CFile('鋼鐵俠.mp4');
let file2 = new CFile('再談記憶.mp3');
movieFolder.add(file1);
musicFolder.add(file2);
mediaFolder.add(movieFolder);
mediaFolder.add(musicFolder);
mediaFolder.scan();
輸出:
開始掃描文件：鋼鐵俠.mp4
開始掃描文件：再談記憶.mp3
??CFolder??與 ??CFile?? 接口保持一致。執(zhí)行 ??scan()?? 時，若發(fā)現(xiàn)是樹對象，則繼續(xù)遍歷其下的葉對象，執(zhí)行 ??scan()??。
JavaScript 不同于其它靜態(tài)編程語言，實現(xiàn)組合模式的難點是保持樹對象與葉對象之間接口保持統(tǒng)一，可借助 TypeScript 定制接口規(guī)范，實現(xiàn)類型約束。
// 定義接口規(guī)范
interface Compose {
name: string,
add(file: CFile): void,
scan(): void
}
// 樹對象 - 文件目錄
class CFolder implements Compose {
fileList = [];
name: string;
constructor(name: string) {
this.name = name;
}
add(file: CFile) {
this.fileList.push(file);
}
scan() {
for (let file of this.fileList) {
file.scan();
}
}
}
// 葉對象 - 文件
class CFile implements Compose {
name: string;
constructor(name: string) {
this.name = name;
}
add(file: CFile) {
throw new Error('文件下面不能再添加文件');
}
scan() {
console.log(`開始掃描：${this.name}`)
}
}
let mediaFolder = new CFolder('娛樂');
let movieFolder = new CFolder('電影');
let musicFolder = new CFolder('音樂');
let file1 = new CFile('鋼鐵俠.mp4');
let file2 = new CFile('再談記憶.mp3');
movieFolder.add(file1);
musicFolder.add(file2);
mediaFolder.add(movieFolder);
mediaFolder.add(musicFolder);
mediaFolder.scan();輸出:
開始掃描文件：鋼鐵俠.mp4
開始掃描文件：再談記憶.mp3
需要注意的是：
- 組合不是繼承，樹葉對象并不是父子對象
- 葉對象操作保持一致性
- 葉對象實現(xiàn)冒泡傳遞
- 不只是簡單的子集遍歷
它的應用場景：
- 優(yōu)化處理遞歸或分級數(shù)據(jù)結(jié)構(gòu)（文件系統(tǒng) - 目錄文件管理）；
- 與其它設計模式聯(lián)用，如與命令模式聯(lián)用實現(xiàn) “宏命令”。
它的優(yōu)點：忽略組合對象和單個對象的差別，對外一致接口使用；解耦調(diào)用者與復雜元素之間的聯(lián)系，處理方式變得簡單。
它的缺點：樹葉對象接口一致，無法區(qū)分，只有在運行時方可辨別；包裹對象創(chuàng)建太多，額外增加內(nèi)存負擔。
到此這篇關于學習理解JavaScript組合模式Composite Pattern的文章就介紹到這了,更多相關JS組合模式內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
![JavaScript中將一個值轉(zhuǎn)換為字符串的方法分析[譯]](http://img.jbzj.com/images/xgimg/bcimg0.png)
JavaScript中將一個值轉(zhuǎn)換為字符串的方法分析[譯]
在JavaScript中,主要有三種方法能讓任意值轉(zhuǎn)換為字符串.本文講解了每種方法以及各自的優(yōu)缺點2012-09-09
這篇文章主要為大家介紹了JavaScript數(shù)組塌陷實例解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-05-05
本文給大家分享javascript腳本庫編寫的方法，涉及到javascript腳本相關知識，對javascript腳本相關知識感興趣的朋友一起學習吧2015-12-12
document.write()及其輸出內(nèi)容的樣式、位置控制
document.write（），用于簡單的打印內(nèi)容到頁面上，可以逐字打印你需要的內(nèi)容，既然可以輸出變量，肯定會想要去控制下變量的顯示，比如位置以及樣式2013-08-08
正常使用AJAX會需要正?？紤]跨域問題，所以偉大的程序員們又折騰出了一系列跨域問題的解決方案，如JSONP、flash、ifame、xhr2等等。本文給大家介紹JS跨域解決方案之使用CORS實現(xiàn)跨域，感興趣的朋友參考下吧2016-04-04
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)選項卡滑動切換，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-10-10
這篇文章主要介紹了使用js繪制幾何圖形教程，本文主要是教大家繪制圓、弧、扇形,需要的朋友可以參考下2015-01-01
這篇文章主要介紹了JS交換變量的方法,實例分析了javascript通過自定義函數(shù)實現(xiàn)變量交換的使用技巧,需要的朋友可以參考下2015-01-01
要返回上一頁再刷新頁面我們用到最多的是在像php,asp,jsp,asp.net中，下面我來給大家先介紹js 返回前一頁并刷新頁面，然后再把這些代碼放在php中實現(xiàn)刪除后返回當前頁面并刷新頁面2020-09-09
JavaScript中Number.isNaN 和 isNaN 的區(qū)別詳解
本文和大家分享一個前幾天寫代碼踩的坑,筆者在業(yè)務邏輯中需要對一個值進行NaN的判斷,由于筆者的不嚴謹,使用了isNaN,從而引起B(yǎng)ug,也正是因為這個,筆者才知道了isNaN和Number.isNaN的區(qū)別,所以本文就和大家聊聊它們的區(qū)別2023-09-09