js设计模式之（状态模式）

亦凉 2023-06-27 12:37 10阅读 0赞

## 状态模式 ##

在状态模式（State Pattern）中，类的行为是基于它的状态改变的。这种类型的设计模式属于行为型模式。

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

## 介绍 ##

### 意图： ###

允许对象在内部状态发生改变时改变它的行为，对象看起来好像修改了它的类。

### 主要解决： ###

对象的行为依赖于它的状态（属性），并且可以根据它的状态改变而改变它的相关行为。

### 何时使用： ###

代码中包含大量与对象状态有关的条件语句。

### 如何解决： ###

将各种具体的状态类抽象出来。

### 优点： ###

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

### 缺点： ###

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

### 使用场景： ###

1.  行为随状态改变而改变的场景。
2.  条件. 分支语句的代替者。

### 注意事项： ###

在行为受状态约束的时候使用状态模式，而且状态不超过 5 个

### 作业： ###

做头发

#### 状态： ####

1.  准备
2.  开始
3.  结束

AbstractMethodError.js

export default class AbstractMethodError extends Error {
        constructor() {
            super("this method should be overried");
            this.name = "AbstractMethodError";
        }
    }

Haircut.js

export default class Haircut {
        constructor(user) {
            this.state = null;
            this.user = user;
        }
    
        setState(state) {
            this.state = state;
            console.log(`我是: ${this.user.name} 我现在${this.state.stateName}`)
        }
    }

PreState.js

import State from "./State";
    
    export default class PreState extends State {
        constructor(context) {
            super(context);
        }
    
        run() {
            this.stateName = "准备去理发";
            this.context.setState(this);
        }
    }

StartState.js

import State from "./State";
    
    export default class StartState extends State {
        constructor(context) {
            super(context);
        }
    
        run() {
            this.stateName = "开始理发";
            this.context.setState(this);
        }
    }

State.js

import AbstractMethodError from "./AbstractMethodError";
    
    export default class State {
        constructor(context) {
            this.context = context;
            this.stateName = "";
        }
    
        run() {
            throw new AbstractMethodError();
        }
    }

StopState.js

import State from "./State";
    
    export default class StopState extends State {
        constructor(context) {
            super(context);
        }
    
        run() {
            this.stateName = "理发结束了";
            this.context.setState(this);
        }
    }

测试demo：

import Haircut from "./src/Haircut";
    import PreState from "./src/PreState";
    import StartState from "./src/StartState";
    import StopState from "./src/StopState";
    
    export default {
        name: 'page-StatePattern',
        created() {
            const user = {
                "name": "小白"
            };
            const context = new Haircut(user);
            //模拟状态操作(Pre)
            setTimeout(() => {
                new PreState(context).run();
            }, 1000);
            //模拟状态操作(start)
            setTimeout(() => {
                new StartState(context).run();
            }, 1000);
            //模拟状态操作(stop)
            setTimeout(() => {
                new StopState(context).run();
            }, 1000);
        }
    };

参考：

> [https://www.runoob.com/design-pattern/design-pattern-tutorial.html][https_www.runoob.com_design-pattern_design-pattern-tutorial.html]

[https_www.runoob.com_design-pattern_design-pattern-tutorial.html]: https://www.runoob.com/design-pattern/design-pattern-tutorial.html