JavaScript設計模式之命令模式

2022-06-23 14:00:41

前言

命令設計模式是由三部分構成：

發令者：用於發出命令和呼叫命令，不知道如何執行且誰去執行
執行者：用於提供對應介面發出的命令的處理請求，不知道誰發出的命令
命令物件：用於接收命令且處理執行者的請求

把執行操作和稍後執行事件資訊存在命令物件中，通過發令者釋出命令來讓執行者進行執行，從而達到了執行者和發令者分離開來，使程式碼耦合度降低

生活中的命令設計模式

在生活中，我們去飯館吃飯，我們先告訴服務員我們想要吃那些菜以及對菜品的要求，然後服務員通過點餐平臺告知後面的廚房，廚房得知我們想要吃的菜以及對菜品的要求，廚師對菜品進行製作，做好後通知服務員，服務員把菜品給我們端上來，我們進行享用

生活中例子上，發令者就是我們，執行者是服務員，廚師製作菜品則是命令物件

工作中的命令設計模式

在工作中我們通常用於某些時候需要向某些物件發起請求，但並不知道接收者是誰，也不知道請求的操作是什麼，此時可以使用命令設計模式

我們來做一個需求，該需求是能夠一鍵封鎖賬戶許可權和一鍵解封賬戶許可權

頁面結構，寫上倆個許可權按鈕進行控制許可權開啟與關閉

   <button id="onbtn">開啟許可權</button>
    <button id="offbtn">關閉許可權</button>

我們在通過js進行過去到倆個許可權控制按鈕

   const onBtn=document.getElementById('onbtn');
  const offBtn=document.getElementById('offbtn');

發令者

class Control {
    submit(command) {
        command.execute();
    }
}

執行者

class Power {
    powerOn() {
        console.log("開啟所有許可權入口");
    }

    powerOff() {
        console.log("關閉所有許可權入口");
    }
}

命令物件：

class PowerOnCommand {
    constructor(current) {
        this.current = current;
    }
    execute() {
        this.current.powerOn();
    }
    undo() {
        this.current.powerOff();
    }
    redo() {
        this.execute();
    }
}
class PowerOffCommand {
    constructor(current) {
        this.current = current;
    }
    execute() {
        this.current.powerOff();
    }
    undo() {
        this.current.powerOn();
    }
    redo() {
        this.execute();
    }
}

我們把各個類都建立好範例，然後再通過js給按鈕繫結上事件，通過事件操作命令者範例進行釋出命令

//執行者範例
const power = new Power();
//命令物件範例
const powerOn = new PowerOnCommand(power);
const powerOff = new PowerOffCommand(power);
//釋出者範例
const control = new Control();
//開啟許可權按鈕繫結事件
onBtn.onclick=function(){
// 開啟所有許可權入口
    control.submit(powerOn); 
    alert('許可權已開啟')
}
//關閉許可權按鈕繫結事件
offBtn.onclick=function(){
// 關閉所有許可權入口
    control.submit(powerOff); 
    alert('許可權已關閉')
}

命令者設計模式由於允許我們將操作封裝在物件中進行管理，所以也可以用來實現事務系統，將執行的命令儲存在歷史記錄中，如果成功則執行最後的命令，否則根據歷史記錄進行回滾，對執行的操作進行復原

到此這篇關於JavaScript設計模式之命令模式的文章就介紹到這了,更多相關JavaScript 命令模式內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！

JavaScript設計模式之命令模式

目錄

前言

生活中的命令設計模式

工作中的命令設計模式

發令者

執行者

熱門文章