JavaScript设计模式之命令模式
codesky · 210浏览 · 发布于2022-06-23
这篇文章主要介绍了JavaScript设计模式之命令模式,命令设计模式是由发令者、执行者、命令对象三部分构成,文章由此展开详细的内容介绍,需要的小伙伴可以参考一下
前言
命令设计模式是由三部分构成:
发令者:用于发出命令和调用命令,不知道如何执行且谁去执行
执行者:用于提供对应接口发出的命令的处理请求,不知道谁发出的命令
命令对象:用于接收命令且处理执行者的请求
把执行操作和稍后执行事件信息存在命令对象中,通过发令者发布命令来让执行者进行执行,从而达到了执行者和发令者分离开来,使代码耦合度降低
生活中的命令设计模式
在生活中,我们去饭馆吃饭,我们先告诉服务员我们想要吃那些菜以及对菜品的要求,然后服务员通过点餐平台告知后面的厨房,厨房得知我们想要吃的菜以及对菜品的要求,厨师对菜品进行制作,做好后通知服务员,服务员把菜品给我们端上来,我们进行享用
生活中例子上,发令者就是我们,执行者是服务员,厨师制作菜品则是命令对象
工作中的命令设计模式
在工作中我们通常用于某些时候需要向某些对象发起请求,但并不知道接收者是谁,也不知道请求的操作是什么,此时可以使用命令设计模式
我们来做一个需求,该需求是能够一键封锁账户权限和一键解封账户权限
页面结构,写上俩个权限按钮进行控制权限开启与关闭
<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('权限已关闭') }
命令者设计模式由于允许我们将操作封装在对象中进行管理,所以也可以用来实现事务系统,将执行的命令保存在历史记录中,如果成功则执行最后的命令,否则根据历史记录进行回滚,对执行的操作进行撤销
相关推荐
PHP实现部分字符隐藏
沙雕mars · 1325浏览 · 2019-04-28 09:47:56
Java中ArrayList和LinkedList区别
kenrry1992 · 908浏览 · 2019-05-08 21:14:54
5月语言排行榜:R 跌出前二十,Python 紧咬 C++
manongba · 687浏览 · 2019-05-09 17:27:24
Tomcat 下载及安装配置
manongba · 970浏览 · 2019-05-13 21:03:56
什么是SpringBoot
iamitnan · 1086浏览 · 2019-05-14 22:20:36
分类专栏
最新发布
最热排行
0评论