«

JavaScript设计模式之命令模式和状态模式怎么实现

时间:2024-4-15 08:57     作者:韩俊     分类: Javascript


本篇内容介绍了“JavaScript设计模式之命令模式和状态模式怎么实现”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!

    命令模式

    命令模式介绍

    命令模式(Command)的定义是:用于将一个请求封装成一个对象,从而使你可用不同的请求对客户进行参数化;对请求排队或者记录请求日志,以及执行可撤销的操作。

    也就是说改模式旨在将函数的调用、请求和操作封装成一个单一的对象,然后对这个对象进行一系列的处理。此外,可以通过调用实现具体函数的对象来解耦命令对象与接收对象。

    代码实现

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>cmd-demo</title>
    </head>
    <body>
        <div>
            <button id="btn1">按钮1</button>
            <button id="btn2">按钮2</button>
        </div>
        <script>
            var btn1 = document.getElementById('btn1')
            var btn2 = document.getElementById('btn2')
            // 定义一个命令发布者(执行者)的类
            class Executor {
                setCommand(btn, command) {
                    btn.onclick = function() {
                        command.execute()
                    }
                }
            }
            // 定义一个命令接收者
            class Menu {
                refresh() {
                    console.log('刷新菜单')
                }
                addSubMenu() {
                    console.log('增加子菜单')
                }
            }
            // 定义一个刷新菜单的命令对象的类
            class RefreshMenu {
                constructor(receiver) {
                    // 命令对象与接收者关联
                    this.receiver = receiver
                }
                // 暴露出统一的接口给命令发布者Executor
                execute() {
                    this.receiver.refresh()
                }
            }
            // 定义一个增加子菜单的命令对象的类
            class AddSubMenu {
                constructor(receiver) {
                    // 命令对象与接收者关联
                    this.receiver = receiver
                }
                // 暴露出统一的接口给命令发布者Executor
                execute() {
                    this.receiver.addSubMenu()
                }
            }
            var menu = new Menu()
            var executor = new Executor()
            var refreshMenu = new RefreshMenu(menu)
            // 给按钮1添加刷新功能
            executor.setCommand(btn1, refreshMenu)
            var addSubMenu = new AddSubMenu(menu)
            // 给按钮2添加增加子菜单功能
            executor.setCommand(btn2, addSubMenu)
        </script>
    </body>
    </html>

    状态模式

    状态模式介绍

    状态模式(State)允许一个对象在其内部状态改变的时候改变它的行为,对象看起来似乎修改了它的类。

    代码实现

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>state-demo</title>
    </head>
    <body>
        <button id="btn">开关</button>
        <script>
            // 定义一个关闭状态的类   
            class OffLightState {
                constructor(light) {
                    this.light = light
                }
                // 每个类都需要这个方法,在不同状态下按都需要触发这个方法
                pressBtn() {
                    this.light.setState(this.light.weekLightState)
                    console.log('开启弱光')
                }
            }
            // 定义一个弱光状态的类   
            class WeekLightState {
                constructor(light) {
                    this.light = light
                }
                pressBtn() {
                    this.light.setState(this.light.strongLightState)
                    console.log('开启强光')
                }
            }
            // 定义一个强光状态的类
            class StrongLightState {
                constructor(light) {
                    this.light = light
                }
                pressBtn() {
                    this.light.setState(this.light.offLightState)
                    console.log('关闭电灯')
                }
            }
            class Light {
                constructor() {
                    this.offLightState = new OffLightState(this)
                    this.weekLightState = new WeekLightState(this)
                    this.strongLightState = new StrongLightState(this)
                    this.currentState = null
                }
                setState(newState) {
                    this.currentState = newState
                }
                init() {
                    this.currentState = this.offLightState
                }
            }
            let light = new Light()
            light.init()
            var btn = document.getElementById('btn')
            btn.onclick = function() {
                light.currentState.pressBtn()
            }
        </script>
    </body>
    </html>

    小结

    • 通过定义不同的状态类,根据状态的改变而改变对象的行为,

    • 不必把大量的逻辑都写在被操作对象的类中,而且容易增加新的状态

    • 符合开放封闭原则

    标签: javascript

    热门推荐