TypeScript 设计模式之【状态模式】

文章目录

状态模式:优雅切换的交通信号灯

当你站在繁忙的十字路口,看着交通信号灯有规律地变换颜色。这个看似简单的信号灯系统,实际上完美诠释了状态模式的精髓。

在软件开发中,我们经常遇到对象需要在不同状态之间切换,在每个状态下表现出不同行为的情况。状态模式就像这个交通信号灯,它允许一个对象在其内部状态改变时改变它的行为,看起来就像改变了对象的类一样!

状态模式的奥秘

状态模式就像一个"行为变形金刚",它将与特定状态相关的行为局部化,并将不同状态的行为分割开来。通过这种方式,你可以独立于其他状态来添加新的状态或者修改现有状态,使得系统更加灵活和可扩展。

状态模式有什么利与弊?

状态模式的优点是它将与特定状态相关的行为局部化,并且将不同状态的行为分割开来。它消除了庞大的条件分支语句,增强了可扩展性。缺点是会增加类的数量,可能会导致状态类过多。

如何使用状态模式来优化你的系统

状态模式涉及角色

  • 上下文(Context): 定义客户感兴趣的接口,维护一个具体状态类的实例
  • 状态(State): 定义一个接口以封装与 Context 的一个特定状态相关的行为
  • 具体状态(ConcreteState): 每一个子类实现一个与 Context 的一个状态相关的行为

状态模式步骤

  1. 创建一个状态接口,定义所有具体状态的共同行为
  2. 创建具体状态类,实现状态接口,定义特定状态下的行为
  3. 创建上下文类,包含当前状态的引用和切换状态的方法
  4. 在上下文类中实现客户端接口,将行为委托给当前状态对象
  5. 客户端通过上下文类来改变状态,触发不同的行为

选择合适的状态模式,你就能轻松地管理对象在不同状态下的行为,让系统变得更加灵活和可维护!

代码实现案例

typescript 复制代码
// 交通灯状态接口
interface TrafficLightState {
  handle(context: TrafficLight): void;
}

// 具体状态类 - 红灯
class RedLight implements TrafficLightState {
  handle(context: TrafficLight): void {
    console.log("红灯亮起,车辆停止,行人通行");
    setTimeout(() => context.setState(new GreenLight()), 5000);
  }
}

// 具体状态类 - 绿灯
class GreenLight implements TrafficLightState {
  handle(context: TrafficLight): void {
    console.log("绿灯亮起,车辆通行,行人等待");
    setTimeout(() => context.setState(new YellowLight()), 5000);
  }
}

// 具体状态类 - 黄灯
class YellowLight implements TrafficLightState {
  handle(context: TrafficLight): void {
    console.log("黄灯亮起,车辆减速,准备停止");
    setTimeout(() => context.setState(new RedLight()), 2000);
  }
}

// 上下文类 - 交通信号灯
class TrafficLight {
  private state: TrafficLightState;

  constructor() {
    this.state = new RedLight();
  }

  setState(state: TrafficLightState): void {
    this.state = state;
    this.state.handle(this);
  }

  start(): void {
    this.state.handle(this);
  }
}

// 客户端代码
const trafficLight = new TrafficLight();
trafficLight.start();

// 输出
// 红灯亮起,车辆停止,行人通行
// (5秒后)
// 绿灯亮起,车辆通行,行人等待
// (5秒后)
// 黄灯亮起,车辆减速,准备停止
// (2秒后)
// 红灯亮起,车辆停止,行人通行
// ...循环继续

状态模式的主要优点

  1. 封装了转换规则: 将状态的转换规则封装在状态类中,减少了 Context 类的复杂度
  2. 枚举可能的状态: 在一个地方枚举可能的状态,使得增加新的状态和转换变得容易
  3. 消除庞大的条件分支语句: 避免了使用大量的 if...else 语句
  4. 状态对象可共享: 如果状态对象没有实例变量,它们可以被多个 Context 对象共享

状态模式的主要缺点

  1. 增加类的数量: 状态模式将每个状态封装成单独的类,可能会导致类的数量增加
  2. 状态模式的结构与实现都较为复杂: 对于简单的状态判断,使用状态模式可能会显得小题大做
  3. 状态之间的转换逻辑分散: 虽然消除了条件分支语句,但是转换逻辑分散在各个状态类中,可能不容易看到整个状态机的结构

状态模式的适用场景

  1. 一个对象的行为取决于它的状态,并且它必须在运行时刻根据状态改变它的行为
  2. 一个操作中含有庞大的多分支的条件语句,且这些分支依赖于该对象的状态
  3. 需要频繁地改变对象的内部状态,同时又希望避免使用大量的 if-else 语句

总结

状态模式是一种行为型设计模式,它允许一个对象在其内部状态改变时改变它的行为。状态模式通过将状态封装成独立的类,并将请求委托给当前的状态对象,来实现对象的状态转换。这种模式增强了程序的灵活性和可扩展性,也提高了代码的可读性和可维护性。合理使用状态模式可以让你的代码结构更加清晰,更易于理解和维护。

喜欢的话就点个赞 ❤️,关注一下吧,有问题也欢迎讨论指教。感谢大家!!!

下期预告: TypeScript 设计模式之【策略模式】

相关推荐
joan_851 分钟前
layui表格templet图片渲染--模板字符串和字符串拼接
前端·javascript·layui
还是大剑师兰特24 分钟前
什么是尾调用,使用尾调用有什么好处?
javascript·大剑师·尾调用
m0_7482361132 分钟前
Calcite Web 项目常见问题解决方案
开发语言·前端·rust
Watermelo6171 小时前
详解js柯里化原理及用法,探究柯里化在Redux Selector 的场景模拟、构建复杂的数据流管道、优化深度嵌套函数中的精妙应用
开发语言·前端·javascript·算法·数据挖掘·数据分析·ecmascript
m0_748248941 小时前
HTML5系列(11)-- Web 无障碍开发指南
前端·html·html5
m0_748235611 小时前
从零开始学前端之HTML(三)
前端·html
一个处女座的程序猿O(∩_∩)O3 小时前
小型 Vue 项目,该不该用 Pinia 、Vuex呢?
前端·javascript·vue.js
大圣数据星球4 小时前
Fluss 写入数据湖实战
大数据·设计模式·flink
思忖小下5 小时前
梳理你的思路(从OOP到架构设计)_设计模式Template Method模式
设计模式·模板方法模式·eit
hackeroink6 小时前
【2024版】最新推荐好用的XSS漏洞扫描利用工具_xss扫描工具
前端·xss