JavaScript -- 设计模式行为型设计模式-状态模式

悠悠 2021-12-24 05:37 293阅读 0赞

状态模式：当一个对象里面有状态变化，而且当状态发生改变时，会触发一个逻辑（或者行为）。特别当状态比较多时，那么就需要状态模式，不能总是写if else 来控制。

生活中，红绿灯就是一个很好的状态模式的例子。

我们先来看一下简化版状态模式的类图。

![20190626200403246.png][]

我们以红绿灯为例，来写一下代码。

class State {
        constructor(color) {
            this.color = color;
        }
        handle(context) {
            context.setState(this);
        }
    }
    
    
    class Context {
        constructor() {
            this.state = null;
        }
        setState(state) {
            this.state = state;
        }
        getState() {
            return this.state;
        }
    }
    
    const context = new Context();
    
    const green = new State("绿灯");
    const yellow = new State("黄灯");
    const red = new State("红灯");
    
    green.handle(context);
    console.log(context.getState().color);
    red.handle(context);
    console.log(context.getState().color);
    yellow.handle(context);
    console.log(context.getState().color);

![20190626203003502.png][]

这只是一个简单的例子，演示了如何将状态和操作对象实现分离。

[javascript-state-machine][]  这是一个JS的状态管理库，用法非常简答

我们还是使用红绿灯例子举例

const StateMachine = require("javascript-state-machine");
    
    const fsm = new StateMachine({
        init: "red", //触式默认状态
        transitions: [
            { name: "rTOy", from: "red", to: "yellow" }, //定义变化
            { name: "yTOg", from: "yellow", to: "green" },
            { name: "gTOr", from: "green", to: "red" },
        ],
        methods: { //定义变化 触发的逻辑
            onRTOy: function () {
                console.log("红灯变成黄灯");
            },
            onYTOg: function () {
                console.log("黄灯变成绿灯");
            },
            onGTOr: function () {
                console.log("绿灯变成红灯");
            },
        }
    })
    
    const flag = setInterval(()=>{
        if (fsm.is("red")) { //使用is来判断状态
            fsm.rTOy(); //调用定义好的方法
        } else if (fsm.is("yellow")) {
            fsm.yTOg();
        } else {
            fsm.gTOr();
        }  
    }, 2000);

![20190626220832372.png][]

我们在看一个复杂一点的例子，我们使用上面的那个库，来实现一个非常简单的promise(因为Promise的状态有三个pending fulfilled  rejected）

当状态从pending到fulfilled时，那么就调用resolve  当状态从pending到rejected时 ，那么调用reject

很明显这里面有状态的变化，所以我们使用状态模式写一下。

const StateMachine = require("javascript-state-machine");
    
    const fsm = new StateMachine({
        init: "pending",
        transitions: [
            { name: "resolve", from: "pending", to: "fulfilled" },
            { name: "reject", from: "pending", to: "rejected" },
        ],
        methods: {
            onResolve: function (state, resolveFn) { //将成功的所有回调全部调用
                resolveFn.forEach((fn) => fn());
            },
            onReject: function (state, rejectFn) {//将失败的所有回调全部调用
                rejectFn.forEach((fn) => fn());
            }
        }
    })
    
    class MyPromise {
        constructor(fn) {
            this.resolveCallBack = [];
            this.rejectCallBack = [];
            fn((target) => {//resolve 函数即把状态把pending转为fulfilled
                fsm.resolve(this.resolveCallBack);
            }, () => {//reject 函数即把状态把pending转为rejected
                fsm.reject(this.rejectCallBack );
            })
        }
        then(resolve = () => {}, reject = () => {}) {
            this.resolveCallBack.push(resolve); //添加成功回调
            this.rejectCallBack.push(reject);
        }
    }
    
    
    function loadImg(src) {
        return new MyPromise((resolve, reject) => {
            const img = document.createElement("img");
            img.onload = function () {
                resolve();
            }
            img.onerror = function () {
                reject();
            }
            img.src = src;
        })
    }
    
    const result = loadImg("https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3034041308,2252600183&fm=26&gp=0.jpg")
    
    result.then(() => {
        console.log("成功了")
    }, () => {
        console.log("失败了")
    })

关键的地方 我已经加上了注释，假如你了解promise的工作原理，那么理解起来就不难，不然的话，需要一些时间。

![20190626225443256.png][]

上面代码 演示了如何使用状态模式来实现promise的几种状态管理，当一个对象里面有许多状态而且状态的改变会引发变化，那么你可以试试状态模式。

[20190626200403246.png]: /images/20211223/faee72a51a0d454cb94a653ef80ad4f0.png
[20190626203003502.png]: /images/20211223/6191737b587d411b827d371068c96460.png
[javascript-state-machine]: https://github.com/jakesgordon/javascript-state-machine
[20190626220832372.png]: /images/20211223/4bb0bfdd89434ea78a28f569bcf33950.png
[20190626225443256.png]: /images/20211223/ef8a0cf688be453b91c2376b185bd89e.png

发表评论取消回复

表情：

评论列表（有 0 条评论，293人围观）

还没有评论，来说两句吧...

相关阅读

相关 c#设计模式-行为型模式之状态模式

状态模式是一种行为设计模式，它允许对象在其内部状态改变时改变其行为，我们可以通过创建一个状态接口和一些实现了该接口的状态类来实现状态模式。然后，我们可以创建一个上下文类，...

电玩女神/ 2024年04月23日 20:19/ 0 赞/ 64 阅读

相关设计模式 ☞ 行为型之状态模式

1.1 简介 1.1.1 概述状态(State)模式的定义：对有状态的对象，把复杂的“判断逻辑”提取到不同的状态对象中，允许状态对象在其内部状态发生改变时改变

电玩女神/ 2023年01月06日 05:45/ 0 赞/ 192 阅读

相关【设计模式系列】行为型之状态模式

目录概念实践抽象状态类具体状态类环境上下文客户端总结概念 [状态模式(St

红太狼/ 2022年12月15日 11:05/ 0 赞/ 203 阅读

相关设计模式：行为型-状态模式

目录第一章状态模式介绍第二章状态模式实现 2.1、环境类 2.2、抽象状态类 2.3、具体状态类

缺乏、安全感/ 2022年11月18日 01:49/ 0 赞/ 209 阅读

相关 JavaScript -- 设计模式行为型设计模式-观察者模式

观察者模式的重要性无容置疑，作为一名前端工程师假如你只学一个设计模式的话，那么毫无疑问应该是观察者模式。观察者模式：也被称为发布订阅模式（Publish/Subscribe

分手后的思念是犯贱/ 2022年10月03日 00:58/ 0 赞/ 192 阅读

相关【设计模式】行为型模式

<table> <tbody> <tr> <td> 写在前面</td> </tr> </tbody> </table> 我们已经知道，设计

刺骨的言语ヽ痛彻心扉/ 2022年05月26日 05:10/ 0 赞/ 210 阅读

相关 19、设计模式(行为型)之状态模式

作用允许对象在内部状态发生改变时改变它的行为，对象看起来好像修改了它的类。何时使用代码中包含大量与对象状态有关的条件语句。优点 1.

系统管理员/ 2022年05月08日 00:14/ 0 赞/ 251 阅读

相关 JavaScript -- 设计模式行为型设计模式-状态模式

状态模式：当一个对象里面有状态变化，而且当状态发生改变时，会触发一个逻辑（或者行为）。特别当状态比较多时，那么就需要状态模式，不能总是写if else 来控制。生活中，红绿

悠悠/ 2021年12月24日 05:37/ 0 赞/ 294 阅读

相关设计模式之状态模式(行为型)

模式定义一个对象在其内部状态改变时改变其行为，这个对象我们可以称为状态对象，所以状态模式是一种对象行为型模式。模式结构 Context：环境类

梦里梦外;/ 2021年09月17日 10:02/ 0 赞/ 407 阅读

相关 Java设计模式（20）行为型：状态模式

（一）模式概念状态模式是指一个对象在其内部状态改变时改变它的行为。状态模式主要解决的是当控制一个对象状态的条件表达式过于复杂时的情况。把状态的判断逻辑转移到表示不同状态

ゝ一世哀愁。/ 2021年09月11日 05:46/ 0 赞/ 382 阅读