JS实现简单状态模式

v“u

于 2022-12-13 15:47:28 发布

阅读量186

点赞数

文章标签： javascript 设计模式状态模式

本文链接：https://blog.csdn.net/weixin_48358407/article/details/128302765

版权

文章目录

一：什么是状态模式
二：类图
- 2.1：JS类图
三：JS实现简单状态模式

一：什么是状态模式

描述：在该模式中，类的行为基于他的状态改变。这种类型的设计模式属于行为型设计模式。在状态模式中我们创建表示各种状态的对象和一个随着状态改变而改变的上下文。

意图：允许对象在内部状态改变时改变他的行为，这个对象本身看起来好像修改了他的类。
主要解决：对象的行为依赖于他的状态，并且可以根据他状态的改变而改变他的行为。
何时使用：在代码中包含大量对象他状态有关的条件语句
解决方案：将各种具体的状态抽象出来

二：类图

2.1：JS类图

在这里插入图片描述

三：JS实现简单状态模式

3.1：状态类

/**
 * 状态类
 */
class State {
    constructor(process) {
        this.process = process;
    }
    /**
     * 处理状态的方法
     * @param {Context} context 状态上下文
     */
    handle(context) {
        // ...处理具体该流程的业务逻辑
        console.log(`物品正处于【${this.process}】状态`);
        // 设置下一个状态
        context.setState(this);

    }
}

3.2：状态上下文类

/**
 * 状态上下文
 */
class Context {
    constructor() {
        this.state = null;
    }
    /**
     * 获取状态
     * @returns 当前状态
     */
    getState(){
        return this.state;
    }
    /**
     * 设置状态
     * @param {*} state 状态
     */
    setState(state){
        this.state = state;
    }
}

3.3：继承自状态类的子类

class Order extends State{

}

3.4：测试

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="./index.js"></script>
    <title>Document</title>
</head>
<body>
    <script>
        var context = new Context();
        var order = new State("ordering");
        var send = new State("sending");

        // 已下单
        order.handle(context);
        context.getState();
        // 发货
        send.handle(context);
        context.getState();
    </script>
</body>
</html>

在这里插入图片描述

v“u

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS实现简单状态模式

描述：在该模式中，类的行为基于他的状态改变。这种类型的设计模式属于行为型设计模式。在状态模式中我们创建表示各种状态的对象和一个随着状态改变而改变的上下文。意图：允许对象在内部状态改变时改变他的行为，这个对象本身看起来好像修改了他的类。主要解决：对象的行为依赖于他的状态，并且可以根据他状态的改变而改变他的行为。何时使用：在代码中包含大量对象他状态有关的条件语句解决方案：将各种具体的状态抽象出来。
复制链接

扫一扫