JavaScript設計模式之命令模式和狀態模式詳解

2022-08-29 22:00:14

命令模式

命令模式介紹

命令模式(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設計模式之命令模式和狀態模式詳解的詳細內容，更多關於JavaScript 命令模式狀態模式的資料請關注it145.com其它相關文章！

JavaScript設計模式之命令模式和狀態模式詳解

目錄

命令模式

命令模式介紹

程式碼實現

狀態模式

狀態模式介紹

程式碼實現

小結

熱門文章