JavaScript設(shè)計(jì)模式之命令模式

更新時(shí)間：2022年06月23日 11:32:27 作者：??前端若水????

這篇文章主要介紹了JavaScript設(shè)計(jì)模式之命令模式，命令設(shè)計(jì)模式是由發(fā)令者、執(zhí)行者、命令對(duì)象三部分構(gòu)成，文章由此展開(kāi)詳細(xì)的內(nèi)容介紹，需要的小伙伴可以參考一下

前言

命令設(shè)計(jì)模式是由三部分構(gòu)成：

發(fā)令者：用于發(fā)出命令和調(diào)用命令，不知道如何執(zhí)行且誰(shuí)去執(zhí)行
執(zhí)行者：用于提供對(duì)應(yīng)接口發(fā)出的命令的處理請(qǐng)求，不知道誰(shuí)發(fā)出的命令
命令對(duì)象：用于接收命令且處理執(zhí)行者的請(qǐng)求

把執(zhí)行操作和稍后執(zhí)行事件信息存在命令對(duì)象中，通過(guò)發(fā)令者發(fā)布命令來(lái)讓執(zhí)行者進(jìn)行執(zhí)行，從而達(dá)到了執(zhí)行者和發(fā)令者分離開(kāi)來(lái)，使代碼耦合度降低

生活中的命令設(shè)計(jì)模式

在生活中，我們?nèi)ワ堭^吃飯，我們先告訴服務(wù)員我們想要吃那些菜以及對(duì)菜品的要求，然后服務(wù)員通過(guò)點(diǎn)餐平臺(tái)告知后面的廚房，廚房得知我們想要吃的菜以及對(duì)菜品的要求，廚師對(duì)菜品進(jìn)行制作，做好后通知服務(wù)員，服務(wù)員把菜品給我們端上來(lái)，我們進(jìn)行享用

生活中例子上，發(fā)令者就是我們，執(zhí)行者是服務(wù)員，廚師制作菜品則是命令對(duì)象

工作中的命令設(shè)計(jì)模式

在工作中我們通常用于某些時(shí)候需要向某些對(duì)象發(fā)起請(qǐng)求，但并不知道接收者是誰(shuí)，也不知道請(qǐng)求的操作是什么，此時(shí)可以使用命令設(shè)計(jì)模式

我們來(lái)做一個(gè)需求，該需求是能夠一鍵封鎖賬戶權(quán)限和一鍵解封賬戶權(quán)限

頁(yè)面結(jié)構(gòu)，寫上倆個(gè)權(quán)限按鈕進(jìn)行控制權(quán)限開(kāi)啟與關(guān)閉

   <button id="onbtn">開(kāi)啟權(quán)限</button>
    <button id="offbtn">關(guān)閉權(quán)限</button>

我們?cè)谕ㄟ^(guò)js進(jìn)行過(guò)去到倆個(gè)權(quán)限控制按鈕

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

發(fā)令者

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

執(zhí)行者

class Power {
    powerOn() {
        console.log("開(kāi)啟所有權(quán)限入口");
    }

    powerOff() {
        console.log("關(guān)閉所有權(quán)限入口");
    }
}

命令對(duì)象：

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();
    }
}

我們把各個(gè)類都創(chuàng)建好實(shí)例，然后再通過(guò)js給按鈕綁定上事件，通過(guò)事件操作命令者實(shí)例進(jìn)行發(fā)布命令

//執(zhí)行者實(shí)例
const power = new Power();
//命令對(duì)象實(shí)例
const powerOn = new PowerOnCommand(power);
const powerOff = new PowerOffCommand(power);
//發(fā)布者實(shí)例
const control = new Control();
//開(kāi)啟權(quán)限按鈕綁定事件
onBtn.onclick=function(){
// 開(kāi)啟所有權(quán)限入口
    control.submit(powerOn); 
    alert('權(quán)限已開(kāi)啟')
}
//關(guān)閉權(quán)限按鈕綁定事件
offBtn.onclick=function(){
// 關(guān)閉所有權(quán)限入口
    control.submit(powerOff); 
    alert('權(quán)限已關(guān)閉')
}

命令者設(shè)計(jì)模式由于允許我們將操作封裝在對(duì)象中進(jìn)行管理，所以也可以用來(lái)實(shí)現(xiàn)事務(wù)系統(tǒng)，將執(zhí)行的命令保存在歷史記錄中，如果成功則執(zhí)行最后的命令，否則根據(jù)歷史記錄進(jìn)行回滾，對(duì)執(zhí)行的操作進(jìn)行撤銷

到此這篇關(guān)于JavaScript設(shè)計(jì)模式之命令模式的文章就介紹到這了,更多相關(guān)JavaScript 命令模式內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: