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

码二

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

  • 算法

  • 数据结构

  • 设计模式

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

  • vue3设计与实现

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

状态模式

# 前言

状态模式属于行为型模式,这个类型的设计模式总结出了 类、对象之间的经典交互方式,将类、对象的行为和使用解耦了,花式的去使用对象的行为来完成特定场景下的功能。

# 状态模式

使用场景:需要多种状态切换,并且状态的功能接口类似时,就可以使用这种模式了,比如 红黄绿灯的切换、空调制冷、制热、通风的切换。

理解:这是一种类、对象之间的经典交互方式,将类、对象的行为和使用解耦了。纯状态模式,在操作类中对所有状态进行汇总,在某个状态类中去设置将要切换的下一个状态。

namespace action_mode_05_2 {

    // 接口
    interface IShowLight {
        lightPole: LightPole
        showLight(): void
    }

    // 绿灯
    class GreenLight implements IShowLight {
        lightPole: LightPole;

        constructor(lightPole: LightPole) {
            this.lightPole = lightPole
        }

        showLight(): void {
            console.log('绿灯亮,前方通行')
            // 这里面其实可以加一些判断,比如出现异常时,直接切换到红灯等等
            this.lightPole.setState(this.lightPole.yellowLight)

        }
    }

    // 黄灯
    class YellowLight implements IShowLight {
        lightPole: LightPole;

        constructor(lightPole: LightPole) {
            this.lightPole = lightPole
        }

        showLight(): void {
            console.log('黄灯亮,注意车俩')
            this.lightPole.setState(this.lightPole.redLight)
        }
    }

    // 红灯
    class RedLight implements IShowLight {
        lightPole: LightPole;

        constructor(lightPole: LightPole) {
            this.lightPole = lightPole
        }

        showLight(): void {
            console.log('红灯亮,禁止通行')
            this.lightPole.setState(this.lightPole.greenLight)
        }
    }



    // 操作类:控制内部状态的切换
    class LightPole {

        greenLight: GreenLight;
        yellowLight: YellowLight;
        redLight: RedLight;

        private currentState: IShowLight;

        stateChangeNum: number = 0


        constructor() {
            this.greenLight = new GreenLight(this)
            this.yellowLight = new YellowLight(this)
            this.redLight = new RedLight(this)

            this.currentState = this.greenLight
        }

        change() {
            this.currentState.showLight()
        }

        setState(state: IShowLight) {
            this.currentState = state
        }
    }

    // 使用
    const lightPole = new LightPole()
    lightPole.change()
    lightPole.change()
    lightPole.change()
    lightPole.change()
    lightPole.change()
    lightPole.change()
    lightPole.change()

}

# 状态模式结合职责链模式

理解:这里的状态模式结合了职责链模式,将类、对象的行为和使用解耦了,默认情况下就是按照顺序切换状态,但是并不影响在状态类中去修改之前的顺序,也不会影响状态类之外强行变更状态。我觉得是一个很好的模式结合。

namespace action_mode_05 {

    // 接口
    interface IShowLight {
        lightPole: LightPole
        nextShowLight: IShowLight
        showLight(): void
        setNextShowLight(nextShowLight: IShowLight): IShowLight
    }

    // 绿灯
    class GreenLight implements IShowLight {
        lightPole: LightPole;
        nextShowLight!: IShowLight

        constructor(lightPole: LightPole) {
            this.lightPole = lightPole
        }

        setNextShowLight(nextShowLight: IShowLight) {
            this.nextShowLight = nextShowLight

            return nextShowLight
        }

        showLight(): void {
            if (this.nextShowLight) {
                console.log('绿灯亮,前方通行')
                this.lightPole.setState(this.nextShowLight)
            } else {
                console.log('状态异常,完犊子了')
            }
        }
    }

    // 黄灯
    class YellowLight implements IShowLight {
        lightPole: LightPole;
        nextShowLight!: IShowLight

        constructor(lightPole: LightPole) {
            this.lightPole = lightPole
        }

        setNextShowLight(nextShowLight: IShowLight) {
            this.nextShowLight = nextShowLight

            return nextShowLight
        }

        showLight(): void {
            if (this.nextShowLight) {
                console.log('黄灯亮,注意车俩')
                this.lightPole.setState(this.nextShowLight)
            } else {
                console.log('状态异常,完犊子了')
            }
        }
    }

    // 红灯
    class RedLight implements IShowLight {
        lightPole: LightPole;
        nextShowLight!: IShowLight

        constructor(lightPole: LightPole) {
            this.lightPole = lightPole
        }

        setNextShowLight(nextShowLight: IShowLight) {
            this.nextShowLight = nextShowLight
            return nextShowLight
        }

        showLight(): void {
            if (this.nextShowLight) {
                console.log('红灯亮,禁止通行')
                this.lightPole.setState(this.nextShowLight)
            } else {
                console.log('状态异常,完犊子了')
            }
        }
    }



    // 操作类:控制内部状态的切换
    class LightPole {

        greenLight: GreenLight;
        yellowLight: YellowLight;
        redLight: RedLight;

        currentState: IShowLight;


        constructor() {
            this.greenLight = new GreenLight(this)
            this.yellowLight = new YellowLight(this)
            this.redLight = new RedLight(this)

            this.currentState = this.greenLight

            // 设置状态切换的链条,在操作类内部设置
            this.currentState
                .setNextShowLight(this.yellowLight)
                .setNextShowLight(this.redLight)
                .setNextShowLight(this.greenLight)
        }

        change() {
            this.currentState.showLight()
        }

        setState(state: IShowLight) {
            this.currentState = state
        }
    }

    // 使用
    const lightPole = new LightPole()
    lightPole.change()
    lightPole.change()
    lightPole.change()
    lightPole.change()
    lightPole.change()
    lightPole.change()
    lightPole.change()
}

#设计模式
上次更新时间: 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