Javascript設計模式之組合模式

前言：菜雞也有夢想，而個人夢想就是進一個真正的互聯網大廠。之前學習的時候沒有系統的整理，從今天開始要保持每週寫博客的習慣，但願本身能夠有所成長。爲了培養編程思惟，決定從設計模式開始寫起。我是經過讀《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設計模式與開發實踐》—— 曾探