aiyoudiao aiyoudiao
  • JavaScript
  • Vue
  • React
  • 低代码
  • 线性系统
  • 暂未分类
  • LeetCode
  • 算法
  • 数据结构
  • 设计模式
  • Other
  • PMP
  • Office
  • 面试
  • Bash
  • 流年往事
  • 经验片段
  • 读书杂感
  • 归档
  • 分类
  • 标签
  • 简介
  • 收藏
  • 有趣
  • 文档

码二

扫微信二维码,认识一下码二吧😉。
  • JavaScript
  • Vue
  • React
  • 低代码
  • 线性系统
  • 暂未分类
  • LeetCode
  • 算法
  • 数据结构
  • 设计模式
  • Other
  • PMP
  • Office
  • 面试
  • Bash
  • 流年往事
  • 经验片段
  • 读书杂感
  • 归档
  • 分类
  • 标签
  • 简介
  • 收藏
  • 有趣
  • 文档
  • LeetCode

  • 算法

  • 数据结构

  • 设计模式

    • 浅聊设计理念
    • 谈一谈设计原则
    • 工厂方法模式
    • 抽象工厂模式
    • 建造者模式
    • 原型模式
    • 单例模式
    • 桥接模式
    • 代理模式
    • 装饰器模式
      • 前言
      • 装饰器模式
    • 适配器模式
    • 享元模式
    • 组合模式
    • 外观模式
    • 观察者模式
    • 模板方法模式
    • 策略模式
    • 职责链模式
    • 状态模式
    • 迭代器模式
    • 访问者模式
    • 备忘录模式
    • 命令模式
    • 解释器模式
    • 中介者模式
  • Other

  • vue3设计与实现

  • 算法与设计
  • 设计模式
aiyoudiao
2022-02-22

装饰器模式

# 前言

装饰器模式属于结构型模式,这个类型的设计模式总结出了 类、对象组合后的经典结构,将类、对象的结构和使用解耦了,花式的去借用对象。

# 装饰器模式

使用场景:动态追加或者撤销功能,一般是给class扩展新功能,面向切面编程也是装饰器模式的体现。

理解:类、对象的结构和使用解耦,装饰器模式很好的诠释了动态功能追加,但是前提是功能接口得一致,这样看起来才是对功能得扩展。综上所见应该是动态的借用,然后暴露对外一致的接口,最后调用这个接口即可,这个借用的操作可以一直叠加,从而实现了无上限的装饰下去。比如ts中的装饰器又叫注解,给类加上注解就会扩展类的功能,给方法加上注解就会扩展方法的功能。ts的装饰器,给类扩展应该是在类的原型上做手脚,而给方法扩展应该是改写了原有方法,用新的方法替换旧方法。


namespace struct_mode_03 {

    // 接口
    interface IPhone {
        run(): void;

    }

    // 产品类
    class HongMiK30 implements IPhone {

        run(): void {
            console.log('运行红米K30手机')
        }
    }

    // 装饰器
    class PhoneDecorator implements IPhone {

        phoneDecorator: IPhone

        constructor(phoneDecorator: IPhone) {
            this.phoneDecorator = phoneDecorator
        }

        run(): void {
            this.phoneDecorator.run()
        }
    }

    // 实体的装饰类
    class FanPhoneDecorator extends PhoneDecorator {

        constructor(phone: IPhone) {
            super(phone)
        }

        run() {
            super.run()
            this.runFan()
        }

        runFan() {
            console.log('安装手机电风扇,运行手机电扇')
        }
    }

    // 实体的装饰类
    class MemoryPhoneDecorator extends PhoneDecorator {

        constructor(phone: IPhone) {
            super(phone)
        }

        run() {
            this.runMemory()
            super.run() // ! 这里是super 不是 this
        }

        runMemory() {
            console.log('硬件升级,加大内存')
        }

    }


    // 使用 一:尝试一下功能的追加
    {
        const hongMiK30 = new HongMiK30()

        const homeMiK30DecorateFan = new FanPhoneDecorator(hongMiK30)
        const homeMiK30DecorateMemory = new MemoryPhoneDecorator(hongMiK30)

        console.log('hongMiK30')
        hongMiK30.run()

        console.log('homeMiK30DecorateFan')
        homeMiK30DecorateFan.run()

        console.log('homeMiK30DecorateMemory')
        homeMiK30DecorateMemory.run()
    }

    // 使用 二:动态的追加功能 面向对象
    {
        const hongMiK30 = new HongMiK30()

        const homeMiK30DecorateFan = new FanPhoneDecorator(hongMiK30)
        const homeMiK30DecorateMemory = new MemoryPhoneDecorator(homeMiK30DecorateFan)

        console.log('homeMiK30DecorateMemory')
        homeMiK30DecorateMemory.run()
    }

    // 使用三:动态的追加功能 AOP

    {
        type fnProtoTypeExpression = {
            addBeforeFn(fn: Function): fnProtoTypeExpression,
            addAfterFn(fn: Function): fnProtoTypeExpression,
        }

        const fnProtoType: fnProtoTypeExpression = Function.prototype as unknown as fnProtoTypeExpression

        fnProtoType.addBeforeFn = function (boforeFn: Function) {
            const that = this as unknown as Function;

            return function (...args: any) {
                boforeFn(...args)
                return that(...args)
            } as unknown as fnProtoTypeExpression
        }

        fnProtoType.addAfterFn = function (afterFn: Function) {
            const that = this as unknown as Function;

            return function (...args: any) {
                const result = that(...args)
                afterFn(...args)
                return result
            } as unknown as fnProtoTypeExpression
        }

        const callMethods1 = function callMethods1() {
            console.log('调用 callMethods1')
        } as unknown as fnProtoTypeExpression

        const callMethods2 = function callMethods2() {
            console.log('调用 callMethods2')
        } as unknown as fnProtoTypeExpression

        const callMethods3 = function callMethods3() {
            console.log('调用 callMethods3')
        } as unknown as fnProtoTypeExpression

        (callMethods2
            .addBeforeFn(callMethods1 as unknown as Function)
            .addAfterFn(callMethods3 as unknown as Function) as unknown as Function)()
    }

}

#设计模式
上次更新时间: 10年18月2023日 01时57分53秒
代理模式
适配器模式

← 代理模式 适配器模式 →

最近更新
01
01.数据结构导论一览.md
10-16
02
30.2023年06月04日.md
06-04
03
08.与测量相关.md
05-06
更多文章>
Theme by Vdoing | Copyright © 2017-2023 aiyoudiao 码二 备案号: 鄂ICP备2022002654号-1