JS 设计模式状态模式

最新推荐文章于 2024-08-23 10:28:07 发布

fengyehongWorld

最新推荐文章于 2024-08-23 10:28:07 发布

阅读量279

点赞数 1

分类专栏： # JS

本文链接：https://blog.csdn.net/feyehong/article/details/125114164

版权

状态模式 JavaScript 灯具控制状态转换设计模式

关键词由CSDN通过智能技术生成

JS 专栏收录该内容

52 篇文章 1 订阅

订阅专栏

案例来源
⏹JS设计模式系列之 —— 状态（State）模式

⏹前提
状态设计模式就是解决某个事物基于很多状态条件下的很多不同逻辑处理，并且这种状态的变化可能还是基于其他状态而变化来，例如审核流程中的状态变化。

在开发中也有基于量变到质变的一个思想，如果这个状态就固定的那么1,2,3种，也不必要进行这个状态的分离，直接if…else…来解决反而更好了。

但是如果状态有N多种，而且还可能会增加，基于开闭原则，我们最好是做加法，于是就把状态给分离出来，基于组合思路来解决问题反而更好。

⏹场景

现在的家庭装修往往都有安装智能灯具，默认状态下是关闭的，按一下是柔光，再按一下是强光，再按一下是睡眠灯，再按一下是关灯，如此循环。

⏹HTML

<!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">
    <style>
        div {
            width: 300px;
            height: 300px;
        }
    </style>
    <title>状态模式1</title>
</head>
<body>
    <button id="btnPress">点击按钮,切换灯光状态</button>
    <hr>
    <div class="light-area"></div>
</body>
<script src="../jquery.min.js"></script>
<script type="module" src="./js/05-状态模式1main.js"></script>
</html>

⏹main.js

import light from './05-状态模式1.js'

const lightArea = $(".light-area");

document.querySelector('#btnPress').addEventListener('click', () => {

    const {
        // 当前灯光的状态
        currentState,
        // 从当前灯光的状态中解构出光的颜色和状态的名称
        currentState: {
            color,
            stateName
        }
    } = light;
    console.log(currentState);

    // 展示当前灯光的颜色
    lightArea.css('backgroundColor', color);
    lightArea.text(stateName);
    
    // 记录下一个灯光的状态
    currentState.pressed();
})

⏹状态模式.js

// 关灯状态
class OffLightState {

    light = null;
    color = 'transparent';
    stateName = '关灯状态';

    constructor(light) {
        this.light = light;
    }
    
    // 关灯灯光按下之后,将状态切换为柔光
    pressed() {
        const weakLight = this.light.weakLight;
        console.log(`本次的状态为:${this.stateName}`);
        console.log(`下一个状态为:${weakLight.stateName}`);
        console.log('----------------------------------');

        // 设置下一次灯要显示的光线
        this.light.setState(weakLight);
    }
}

// 柔光状态
class WeakLightState {

    light = null;
    color = 'pink';
    stateName = '柔光状态';

    constructor(light) {
        this.light = light;
    }

    // 柔光灯光按下之后,将状态切换为强光
    pressed() {
        const strongLight = this.light.strongLight;
        console.log(`本次的状态为:${this.stateName}`);
        console.log(`下一个状态为:${strongLight.stateName}`);
        console.log('----------------------------------');
        
        // 设置下一次灯要显示的光线
        this.light.setState(strongLight);
    }
}

// 强光状态
class StrongLightState {

    light = null;
    color = 'yellow';
    stateName = '强光状态';

    constructor(light) {
        this.light = light;
    }
    
    // 强光灯光按下之后,将状态切换为关灯状态
    pressed() {
        const sleepLight = this.light.sleepLight;
        console.log(`本次的状态为:${this.stateName}`);
        console.log(`下一个状态为:${sleepLight.stateName}`);
        console.log('----------------------------------');

        // 设置下一次灯要显示的光线
        this.light.setState(sleepLight);
    }
}

// 睡眠光状态
class SleepLightState {

    light = null;
    color = 'green';
    stateName = '睡眠光状态';

    constructor(light) {
        this.light = light;
    }
    
    // 睡眠光按下之后,将状态切换为睡眠光
    pressed() {
        const offLight = this.light.offLight;
        console.log(`本次的状态为:${this.stateName}`);
        console.log(`下一个状态为:${offLight.stateName}`);
        console.log('----------------------------------');

        // 设置下一次灯要显示的光线
        this.light.setState(this.light.offLight);
    }
}

// 灯的实体类
class Light {

    // 灯的各种状态的属性聚合
    offLight = new OffLightState(this);
    weakLight = new WeakLightState(this);
    strongLight = new StrongLightState(this);
    sleepLight = new SleepLightState(this);

    constructor() {
        // 设置灯打开时的默认,光线状态
        this.currentState = this.weakLight;
    }

    // 修改灯的光线状态
    setState(state) {
        this.currentState = state;
    }
}

const light = new Light();
export default light;