JavaScript设计模式 样例三 —— 装饰模式

时间:2019-09-25
本文章向大家介绍JavaScript设计模式 样例三 —— 装饰模式,主要包括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

原文地址:https://www.cnblogs.com/Man-Dream-Necessary/p/11587538.html