快捷導(dǎo)航

JavaScript組合模式Composite Pattern

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

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

組合模式（Composite Pattern），又叫部分整體模式，是用于把一組相似的對(duì)象當(dāng)作一個(gè)單一的對(duì)象。

組合模式依據(jù)樹(shù)形結(jié)構(gòu)來(lái)組合對(duì)象，用來(lái)表示部分以及整體層次。這種類型的設(shè)計(jì)模式屬于結(jié)構(gòu)型模式，它創(chuàng)建了對(duì)象組的樹(shù)形結(jié)構(gòu)。

樹(shù)對(duì)象和葉對(duì)象接口統(tǒng)一，樹(shù)對(duì)象增加一個(gè)緩存數(shù)組，存儲(chǔ)葉對(duì)象。執(zhí)行樹(shù)對(duì)象方法時(shí)，將請(qǐng)求傳遞給其下葉對(duì)象執(zhí)行。

// 樹(shù)對(duì)象 - 文件目錄
class CFolder {
constructor(name) {
this.name = name;
this.files = [];
}
add(file) {
this.files.push(file);
}
scan() {
for (let file of this.files) {
file.scan();
}
}
}
// 葉對(duì)象 - 文件
class CFile {
constructor(name) {
this.name = name;
}
add(file) {
throw new Error('文件下面不能再添加文件');
}
scan() {
console.log(`開(kāi)始掃描文件：${this.name}`);
}
}
let mediaFolder = new CFolder('娛樂(lè)');
let movieFolder = new CFolder('電影');
let musicFolder = new CFolder('音樂(lè)');
let file1 = new CFile('鋼鐵俠.mp4');
let file2 = new CFile('再談?dòng)洃?mp3');
movieFolder.add(file1);
musicFolder.add(file2);
mediaFolder.add(movieFolder);
mediaFolder.add(musicFolder);
mediaFolder.scan();

輸出:

開(kāi)始掃描文件：鋼鐵俠.mp4
開(kāi)始掃描文件：再談?dòng)洃?mp3

??CFolder??與 ??CFile?? 接口保持一致。執(zhí)行 ??scan()?? 時(shí)，若發(fā)現(xiàn)是樹(shù)對(duì)象，則繼續(xù)遍歷其下的葉對(duì)象，執(zhí)行 ??scan()??。

JavaScript 不同于其它靜態(tài)編程語(yǔ)言，實(shí)現(xiàn)組合模式的難點(diǎn)是保持樹(shù)對(duì)象與葉對(duì)象之間接口保持統(tǒng)一，可借助 TypeScript 定制接口規(guī)范，實(shí)現(xiàn)類型約束。

// 定義接口規(guī)范
interface Compose {
name: string,
add(file: CFile): void,
scan(): void
}
// 樹(shù)對(duì)象 - 文件目錄
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();
}
}
}
// 葉對(duì)象 - 文件
class CFile implements Compose {
name: string;
constructor(name: string) {
this.name = name;
}
add(file: CFile) {
throw new Error('文件下面不能再添加文件');
}
scan() {
console.log(`開(kāi)始掃描：${this.name}`)
}
}
let mediaFolder = new CFolder('娛樂(lè)');
let movieFolder = new CFolder('電影');
let musicFolder = new CFolder('音樂(lè)');
let file1 = new CFile('鋼鐵俠.mp4');
let file2 = new CFile('再談?dòng)洃?mp3');
movieFolder.add(file1);
musicFolder.add(file2);
mediaFolder.add(movieFolder);
mediaFolder.add(musicFolder);
mediaFolder.scan();

輸出: