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)換為字符串的方法分析[譯]
在JavaScript中,主要有三種方法能讓任意值轉(zhuǎn)換為字符串.本文講解了每種方法以及各自的優(yōu)缺點2012-09-09document.write()及其輸出內(nèi)容的樣式、位置控制
document.write(),用于簡單的打印內(nèi)容到頁面上,可以逐字打印你需要的內(nèi)容,既然可以輸出變量,肯定會想要去控制下變量的顯示,比如位置以及樣式2013-08-08JavaScript中Number.isNaN 和 isNaN 的區(qū)別詳解
本文和大家分享一個前幾天寫代碼踩的坑,筆者在業(yè)務邏輯中需要對一個值進行NaN的判斷,由于筆者的不嚴謹,使用了isNaN,從而引起B(yǎng)ug,也正是因為這個,筆者才知道了isNaN和Number.isNaN的區(qū)別,所以本文就和大家聊聊它們的區(qū)別2023-09-09