快捷導(dǎo)航

JavaScript組合模式Composite Pattern

更新時間：2022年04月26日 11:12:43 作者：掘金安東尼

這篇文章主要介紹了學(xué)習(xí)理解JavaScript組合模式，組合模式及Composite Pattern又叫部分整體模式，是用于把一組相似的對象當作一個單一的對象

組合模式（Composite Pattern），又叫部分整體模式，是用于把一組相似的對象當作一個單一的對象。

組合模式依據(jù)樹形結(jié)構(gòu)來組合對象，用來表示部分以及整體層次。這種類型的設(shè)計模式屬于結(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();

輸出: