[design pattern] decorator pattern：為物件動態添加超能力

cover

Decorator 模式：為物件裝上百變功能的神奇魔法

想像一下，如果你能像變形金剛一樣，隨時為自己添加新的功能和裝備，那該有多酷！在程式設計中，Decorator 模式就能實現這種神奇的效果。它讓我們能夠在不修改原有程式碼的情況下，動態地為物件添加新功能。讓我們一起來探索這個強大又靈活的設計模式吧！

classDiagram
    class Component {
        <<interface>>
        +cost()* number
        +description()* String
    }
    class BasicCoffee {
        +cost() number
        +description() String
    }
    class Decorator {
        -coffee : Component
        +cost() number
        +description() String
    }
    class MilkDecorator {
        +cost() number
    }
    class SugarDecorator {
        +cost() number
    }
    Component <|.. BasicCoffee
    Component <|.. Decorator
    Decorator <|-- MilkDecorator
    Decorator <|-- SugarDecorator
    Decorator --> Component

1. Decorator 模式是什麼？

Decorator 模式就像給物件穿上不同的衣服：

基本物件：就像是一個簡單的機器人。
裝飾器：各種功能模組，可以自由組合。
靈活組合：可以隨時添加或移除功能，不影響基本物件。

2. 為什麼要用 Decorator？

Decorator 模式在許多場景下都能派上用場：

咖啡訂製系統：基本咖啡加上各種配料，每種配料都是一個裝飾器。
遊戲角色系統：基本角色可以裝備各種道具，每種道具都是一個裝飾器。
文件處理系統：對文件進行多重處理，如壓縮、加密等，每個處理步驟都是一個裝飾器。

3. Decorator 模式實戰：打造一個靈活的咖啡訂製系統

接下來，我們來看看如何用 Decorator 模式實現一個炫酷的咖啡訂製系統：

class BasicCoffee {
    cost() {
        return 5; // 基本咖啡的價格
    }
 
    description() {
        return 'Basic Coffee'; // 基本咖啡的描述
    }
}
 
class Decorator {
    constructor(coffee) {
        this.coffee = coffee;
    }
 
    cost() {
        return this.coffee.cost();
    }
 
    description() {
        return this.coffee.description();
    }
}
 
class MilkDecorator extends Decorator {
    cost() {
        return super.cost() + 2;
    }
 
    description() {
        return `${super.description()} + Milk`;
    }
}
 
class SugarDecorator extends Decorator {
    cost() {
        return super.cost() + 1;
    }
 
    description() {
        return `${super.description()} + Sugar`;
    }
}
 
// 使用示例
let coffee = new BasicCoffee();
console.log(coffee.cost()); // 5
console.log(coffee.description()); // 'Basic Coffee'
 
coffee = new MilkDecorator(coffee);
console.log(coffee.cost()); // 7
console.log(coffee.description()); // 'Basic Coffee + Milk'
 
coffee = new SugarDecorator(coffee);
console.log(coffee.cost()); // 8
console.log(coffee.description()); // 'Basic Coffee + Milk + Sugar'

4. Decorator 模式的實際應用場景

GUI 元件系統：
- 為基本按鈕添加邊框、陰影、動畫效果等。例如，你可以用 Decorator 模式來組合這些效果，使按鈕更加吸引人。
遊戲開發：
- 為遊戲角色添加各種技能和裝備，如加速、隱身或特殊攻擊。
網路請求處理：
- 為 HTTP 請求添加身份驗證、日誌記錄、錯誤處理等功能，使請求處理更加全面和安全。
資料流處理：
- 為資料流添加壓縮、加密、格式轉換等處理步驟，確保資料在傳輸過程中的安全性和完整性。

5. Decorator 模式的注意事項

複雜度管理：過多的裝飾器可能導致系統變得複雜，需要謹慎管理。
順序敏感：某些情況下，裝飾器的應用順序可能會影響最終結果，需要注意順序的合理安排。
透明性：確保裝飾後的物件與原物件保持一致的介面，這樣才能確保系統的可預測性和穩定性。
效能考慮：在高效能要求的場景中，多層裝飾可能會帶來效能損耗，因此需權衡裝飾的層數與效能之間的平衡。

結論

Decorator 模式就像給你的程式碼穿上了一件百變魔術服，讓你能夠靈活地為物件添加新功能，而不需要修改現有的程式碼。無論是在開發咖啡訂製系統、遊戲角色系統，還是複雜的資料處理流程中，Decorator 模式都能讓你的程式碼更加靈活和可擴展。下次當你需要為物件動態添加功能時，不妨試試這個神奇的設計模式吧！

Terry Yao's Blog

分類

目錄