js 中的組合模式

什麼是組合模式

其實在上面一篇博客中提到過一個宏命令，而這個宏命令和組合模式比較像。成一組子命令，形成一顆樹型的結構（暫且這樣理解），只不過組合模式更加複雜而已。

圖解：

注意：

• 組合模式不是父子關係，而是一種聚合的關係。組合對象把請求委託給它所包含的所有葉對象，它們能夠合作的關鍵是擁有相同的接口
• 組合模式除了要求組合對象和葉對象擁有相同的接口之外，還有一個必要的條件，就是對一組葉對象的操作必須具有一致性

適合場景

• 給公司所有的員工發放過節費，這個場景就可以運用組合模式
• 但是，如果公司某個員工過生日發送一張祝賀生日的郵件，組合模式就沒有什麼用處

個人理解：使用場景主要是集中（對象要多）批發處理某件事時會起到奇效

例子

像殺毒軟件一樣掃描文件夾：

我們先定義兩個類 Folder、File：

// Folder 類
var Folder = function(name) {
    this.name = name;
    this.files = [];
}
Folder.prototype.add = function(file) {
    this.files.push(file);
}
Folder.prototype.scan = function(){
    console.log("開始掃描文件夾：" + this.name);
    for(var i = 0, file, files = this.files; file = files[i++];){
        file.scan();
    }
}

// File 類
var File = function(name) {
    this.name = name;
}
File.prototype.add = function() {
    throw new Error("文件下面不能在添加文件");
}
File.prototype.scan = function() {
    console.log("開始掃描文件：" + this.name);
}

假設下面的一些文件夾和文件對象組成的樹型結構，而這個樹型結構就代表 F 現有的文件目錄結構：

var folder = new Folder('學習資料');
var folder1 = new Folder('JavaScript');
var folder2 = new Folder('jQuery');

var file1 = new File('JavaScript 設計模式與開發實踐');
var file2 = new File('精通 jQuery');
var file3 = new File('重構與模式');

folder1.add(file1);
folder2.add(file2);

folder.add(folder1);
folder.add(folder2);
folder.add(file3);

var folder3 = new Folder('Node.js');
var file4 = new File('深入淺出 Node.js');
folder3.add(file4);

var file5 = new File('JavaScript 語言精髓與編程實踐');

folder.add(folder3);
folder.add(file5);

最後掃描這個 F 盤：

folder.scan();

在控制檯中就會看到：

參考資料：

• JavaScript 設計模式與開發實踐