快捷導(dǎo)航

JavaScript設(shè)計(jì)模式之命令模式和狀態(tài)模式詳解

更新時(shí)間：2022年08月29日 17:01:33 作者：RiemannHypothesis

這篇文章主要為大家介紹了JavaScript設(shè)計(jì)模式之命令模式和狀態(tài)模式詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

命令模式

命令模式介紹

命令模式(Command)的定義是：用于將一個(gè)請(qǐng)求封裝成一個(gè)對(duì)象，從而使你可用不同的請(qǐng)求對(duì)客戶進(jìn)行參數(shù)化；對(duì)請(qǐng)求排隊(duì)或者記錄請(qǐng)求日志，以及執(zhí)行可撤銷的操作。

也就是說改模式旨在將函數(shù)的調(diào)用、請(qǐng)求和操作封裝成一個(gè)單一的對(duì)象，然后對(duì)這個(gè)對(duì)象進(jìn)行一系列的處理。此外，可以通過調(diào)用實(shí)現(xiàn)具體函數(shù)的對(duì)象來解耦命令對(duì)象與接收對(duì)象。

代碼實(shí)現(xiàn)

<!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')
        // 定義一個(gè)命令發(fā)布者(執(zhí)行者)的類
        class Executor {
            setCommand(btn, command) {
                btn.onclick = function() {
                    command.execute()
                }
            }
        }
        // 定義一個(gè)命令接收者
        class Menu {
            refresh() {
                console.log('刷新菜單')
            }
            addSubMenu() {
                console.log('增加子菜單')
            }
        }
        // 定義一個(gè)刷新菜單的命令對(duì)象的類
        class RefreshMenu {
            constructor(receiver) {
                // 命令對(duì)象與接收者關(guān)聯(lián)
                this.receiver = receiver
            }
            // 暴露出統(tǒng)一的接口給命令發(fā)布者Executor
            execute() {
                this.receiver.refresh()
            }
        }
        // 定義一個(gè)增加子菜單的命令對(duì)象的類
        class AddSubMenu {
            constructor(receiver) {
                // 命令對(duì)象與接收者關(guān)聯(lián)
                this.receiver = receiver
            }
            // 暴露出統(tǒng)一的接口給命令發(fā)布者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>

狀態(tài)模式

狀態(tài)模式介紹

狀態(tài)模式（State）允許一個(gè)對(duì)象在其內(nèi)部狀態(tài)改變的時(shí)候改變它的行為，對(duì)象看起來似乎修改了它的類。

代碼實(shí)現(xiàn)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>state-demo</title>
</head>
<body>
    <button id="btn">開關(guān)</button>
    <script>
        // 定義一個(gè)關(guān)閉狀態(tài)的類   
        class OffLightState {
            constructor(light) {
                this.light = light
            }
            // 每個(gè)類都需要這個(gè)方法，在不同狀態(tài)下按都需要觸發(fā)這個(gè)方法
            pressBtn() {
                this.light.setState(this.light.weekLightState)
                console.log('開啟弱光')
            }
        }
        // 定義一個(gè)弱光狀態(tài)的類   
        class WeekLightState {
            constructor(light) {
                this.light = light
            }
            pressBtn() {
                this.light.setState(this.light.strongLightState)
                console.log('開啟強(qiáng)光')
            }
        }
        // 定義一個(gè)強(qiáng)光狀態(tài)的類
        class StrongLightState {
            constructor(light) {
                this.light = light
            }
            pressBtn() {
                this.light.setState(this.light.offLightState)
                console.log('關(guān)閉電燈')
            }
        }
        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>