Javascript设计模式之组合模式

229 阅读2分钟

前言:菜鸡也有梦想,而我的梦想就是进一个真正的互联网大厂。以前学习的时候没有系统的整理,从今天开始要保持每周写博客的习惯,希望自己可以有所成长。为了培养编程思维,决定从设计模式开始写起。我是通过读《Javascript设计模式与开发实践》来学习设计模式,并且将知识点和收获记录在博客中。

此文仅记录本人阅读《JavaScript设计模式与开发实践》的知识点与想法,感谢作者曾探大大写出这么好的一本书。如有冒犯,请联系本人:markcoder@outlook.com处理,请大家购买正版书籍。

1.组合模式介绍

组合模式,将对象组合成树形结构以表示“部分-整体”的层次结构。

1.用小的子对象构造更大的父对象,而这些子对象也由更小的子对象构成

2.单个对象和组合对象对于用户暴露的接口具有一致性,而同种接口不同表现形式亦体现了多态性

2.代码实现

文件夹和文件之间的关系,非常适合用组合模式来描述。文件夹里既可以包含文件,又可以 包含其他文件夹,最终可能组合成一棵树。

// 文件夹类
class Folder {
    constructor (name) {
        this.name = name || 'Folder';
        this.fileList = [];
    }

    add (file) {
        this.fileList.push(file);
    }

    scan () {
        console.log(`开始扫描文件夹:${this.name}`);
        for (let file of this.fileList) {
            file.scan();
        }
    }
}

// 文件类
class File {
    constructor (name) {
        this.name = name || 'file';
    }

    add () {
        throw new Error('文件下面不能添加文件')
    }

    scan () {
        console.log(`开始扫描文件:${this.name}`);
    }
}

// 新建文件夹
let floder1 = new Folder('学习资料');
let floder2 = new Folder('游戏');
let floder = new Folder();

// 新建文件
let file1 = new File('学习视频');
let file2 = new File('绝地求生');
let file3 = new File('炉石传说');
let file4 = new File('js电子书');

floder1.add(file1);
floder1.add(file4);

floder2.add(file2);
floder2.add(file3);

floder.add(floder1);
floder.add(floder2);

// 调用扫描API
floder.scan();

参考

《JavaScript设计模式与开发实践》—— 曾探