状态模式-前端设计模式

最新推荐文章于 2023-12-12 10:01:14 发布

龙马啊

最新推荐文章于 2023-12-12 10:01:14 发布

阅读量400

点赞数

分类专栏：学习过程文章标签：前端状态模式设计模式

本文链接：https://blog.csdn.net/qq_43853213/article/details/124677165

版权

学习过程专栏收录该内容

67 篇文章 0 订阅

订阅专栏

本文介绍了状态模式的概念，通过一个交通信号灯的例子展示了如何使用状态模式来改变对象的行为。代码示例中，信号灯在绿色和红色状态之间切换，每个状态代表一个类，负责处理对应的行为。这种模式在实际开发中可用于处理对象根据其内部状态变化而有不同的行为的场景。

摘要由CSDN通过智能技术生成

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

// 状态
        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());