JavaScript設計模式 樣例三 —— 裝飾模式

裝飾模式(Decorator Pattern)：

定義：在不改變原對象的狀況下，動態的給對象添加一些額外的職責。就功能而言，裝飾模式相比生成子類更爲靈活。
目的：把類的核心職責和裝飾功能區分開。能夠去除相關類中重複的邏輯。
場景：當系統須要擴展一個類的功能，或者客戶端須要動態的給一個對象添加功能，而且使用繼承或生成子類會很複雜的時候。
裝飾模式體現了"多用組合，少用繼承"這一設計原則。

例：JS代碼實現

// 一輛小汽車 的構造函數
function ACar () {
    // 一輛原味小汽車的價格是 99 元
    this.price = function () {
        return 99
    }
}

// 裝飾器 —— 汽車喇叭
function carTrumpet (car) {
    let price = car.price()
    car.trumpet = function () {
        console.log('滴 滴滴')
    }
    // 一個喇叭加價 10 元
    car.price = function () {
        return price + 10
    }
}

// 裝飾器 —— 行車記錄儀
function carRecorder (car) {
    let price = car.price()
    car.recorder = function () {
        console.log('讓一讓啊 讓一讓 我有行車記錄儀')
    }
    // 一個行車記錄儀加價 9.9 元
    car.price = function () {
        return price + 9.9
    }
}

// 初始化一輛小汽車
let car = new ACar()
// 給小汽車裝上喇叭
carTrumpet(car)
// 給小汽車裝上行車記錄儀
carRecorder(car)
// 最後小汽車的價格是 118.9 元
console.log(car.price())

　　

Git地址：https://github.com/skillnull/Design-Mode-Example