JavaScript组合模式Composite Pattern

这篇文章主要介绍了学习理解JavaScript组合模式，组合模式及Composite Pattern又叫部分整体模式，是用于把一组相似的对象当作一个单一的对象

组合模式（Composite Pattern），又叫部分整体模式，是用于把一组相似的对象当作一个单一的对象。

组合模式依据树形结构来组合对象，用来表示部分以及整体层次。这种类型的设计模式属于结构型模式，它创建了对象组的树形结构。

树对象和叶对象接口统一，树对象增加一个缓存数组，存储叶对象。执行树对象方法时，将请求传递给其下叶对象执行。

// 树对象 - 文件目录 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 接口保持一致。执行 scan() 时，若发现是树对象，则继续遍历其下的叶对象，执行 scan()。

JavaScript 不同于其它静态编程语言，实现组合模式的难点是保持树对象与叶对象之间接口保持统一，可借助 TypeScript 定制接口规范，实现类型约束。

// 定义接口规范 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();

输出: