JavaScript設(shè)計模式之命令模式
前言
命令設(shè)計模式是由三部分構(gòu)成:
- 發(fā)令者:用于發(fā)出命令和調(diào)用命令,不知道如何執(zhí)行且誰去執(zhí)行
- 執(zhí)行者:用于提供對應接口發(fā)出的命令的處理請求,不知道誰發(fā)出的命令
- 命令對象:用于接收命令且處理執(zhí)行者的請求
把執(zhí)行操作和稍后執(zhí)行事件信息存在命令對象中,通過發(fā)令者發(fā)布命令來讓執(zhí)行者進行執(zhí)行,從而達到了執(zhí)行者和發(fā)令者分離開來,使代碼耦合度降低
生活中的命令設(shè)計模式
在生活中,我們?nèi)ワ堭^吃飯,我們先告訴服務(wù)員我們想要吃那些菜以及對菜品的要求,然后服務(wù)員通過點餐平臺告知后面的廚房,廚房得知我們想要吃的菜以及對菜品的要求,廚師對菜品進行制作,做好后通知服務(wù)員,服務(wù)員把菜品給我們端上來,我們進行享用
生活中例子上,發(fā)令者就是我們,執(zhí)行者是服務(wù)員,廚師制作菜品則是命令對象
工作中的命令設(shè)計模式
在工作中我們通常用于某些時候需要向某些對象發(fā)起請求,但并不知道接收者是誰,也不知道請求的操作是什么,此時可以使用命令設(shè)計模式
我們來做一個需求,該需求是能夠一鍵封鎖賬戶權(quán)限和一鍵解封賬戶權(quán)限
頁面結(jié)構(gòu),寫上倆個權(quán)限按鈕進行控制權(quán)限開啟與關(guān)閉
<button id="onbtn">開啟權(quán)限</button> <button id="offbtn">關(guān)閉權(quán)限</button>
我們在通過js進行過去到倆個權(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("開啟所有權(quán)限入口"); } powerOff() { console.log("關(guān)閉所有權(quán)限入口"); } }
命令對象:
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(); } }
我們把各個類都創(chuàng)建好實例,然后再通過js給按鈕綁定上事件,通過事件操作命令者實例進行發(fā)布命令
//執(zhí)行者實例 const power = new Power(); //命令對象實例 const powerOn = new PowerOnCommand(power); const powerOff = new PowerOffCommand(power); //發(fā)布者實例 const control = new Control(); //開啟權(quán)限按鈕綁定事件 onBtn.onclick=function(){ // 開啟所有權(quán)限入口 control.submit(powerOn); alert('權(quán)限已開啟') } //關(guān)閉權(quán)限按鈕綁定事件 offBtn.onclick=function(){ // 關(guān)閉所有權(quán)限入口 control.submit(powerOff); alert('權(quán)限已關(guān)閉') }
命令者設(shè)計模式由于允許我們將操作封裝在對象中進行管理,所以也可以用來實現(xiàn)事務(wù)系統(tǒng),將執(zhí)行的命令保存在歷史記錄中,如果成功則執(zhí)行最后的命令,否則根據(jù)歷史記錄進行回滾,對執(zhí)行的操作進行撤銷
到此這篇關(guān)于JavaScript設(shè)計模式之命令模式的文章就介紹到這了,更多相關(guān)JavaScript 命令模式內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
實例講解JavaScript中call、apply、bind方法的異同
這篇文章主要以實例講解的方式為大家總結(jié)了JavaScript中call、apply、bind方法,具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-09-09Javascript DOM事件操作小結(jié)(監(jiān)聽鼠標點擊、釋放,懸停、離開等)
這篇文章主要介紹了Javascript DOM事件操作,結(jié)合實例形式總結(jié)分析了javascript監(jiān)聽鼠標點擊、釋放,懸停、離開等操作技巧,需要的朋友可以參考下2017-01-01有關(guān)suggest快速刪除后仍然出現(xiàn)下拉列表的bug問題
寫suggest的時候,有時我們快速刪除輸入框的文字后,但是suggest下拉列表還有出現(xiàn),導致的原因是因為ajax異步請求造成的,下面通過本文給大家分享下解決方法,感興趣的朋友一起看看2016-12-12