前端设计模式应用--状态模式

65 阅读3分钟

持续创作,加速成长!这是我参与「掘金日新计划 · 10 月更文挑战」的第15天

介绍

  • 在状态模式(State Pattern)中,类的行为是基于它的状态改变的。这种类型的设计模式属于行为型模式。

    在状态模式中,我们创建表示各种状态的对象和一个行为随着状态对象改变而改变的 context 对象。

  • 状态模式主要解决的是当控制一个对象状态的条件表达式过于复杂时的情况。把状态的判断逻辑转移到表示不同状态的一系列类中,可以把复杂的判断逻辑简化。

    允许一个对象在其内部状态改变时改变它的行为。对象看起来似乎修改了它的类

使用场景

  • 行为随状态改变而改变的场景。一个对象的行为取决于它的状态,并且它必须在运行时刻根据状态改变它的行为。

  • 条件、分支语句的代替者。一个操作中含有庞大的多分支结构,并且这些分支决定于对象的状态。

应用实践

设计状态模式的思路:当我们设计类,给一个类做封装的时候一般都会优 '先封装对象的行为',
而'不是对象的状态'。'状态模式'中'刚好相反',状态模式的关键是把事物的'每种状都封装成单独的类',
跟'状态有关的行为'都被'封装在这个类的内部'。

职责明确

  • 环境类(Context)角色:也称为上下文,它定义了客户端需要的接口,内部维护一个当前状态,并负责具体状态的切换。
  • 具体状态(Concrete State)角色:实现抽象状态所对应的行为,并且在需要的情况下进行状态切换。

实现

// 状态
class State {
    constructor(color) {
        this.color = color
    }
    // 改变主体里面的信息
    handle(context) {

        console.log(`turn to ${this.color} light`, '人可以通行');
        context.setState(this)
    }
}

// 主体
class Context {
    constructor() {
        this.state = null
    }
    getState() {
        return this.state
    }
    setState(state) {
        this.state = state
    }
}

let context = new Context()

let green = new State("green")
let red = new State("red")

// 绿灯亮了
green.handle(context)
console.log(context.getState());

// 红灯亮了
red.handle(context)
console.log(context.getState());

汇总

优点:

1、封装了转换规则。
2、枚举可能的状态,在枚举状态之前需要确定状态种类。
3、将所有与某个状态有关的行为放到一个类中,并且可以方便地增加新的状态,只需要改变对象状态即可改变对象的行为。
4、允许状态转换逻辑与状态对象合成一体,而不是某一个巨大的条件语句块。
5、可以让多个环境对象共享一个状态对象,从而减少系统中对象的个数。

缺点:

1、状态模式的使用必然会增加系统类和对象的个数。
2、状态模式的结构与实现都较为复杂,如果使用不当将导致程序结构和代码的混乱。
3、状态模式对"开闭原则"的支持并不太好,对于可以切换状态的状态模式,增加新的状态类需要修改那些负责状态转换的源代码,否则无法切换到新增状态,而且修改某个状态类的行为也需修改对应类的源代码。