JavaScript设计模式之命令模式
作者： 前端若水
这篇文章主要介绍了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('权限已关闭')
}
命令者设计模式由于允许我们将操作封装在对象中进行管理，所以也可以用来实现事务系统，将执行的命令保存在历史记录中，如果成功则执行最后的命令，否则根据历史记录进行回滚，对执行的操作进行撤销
到此这篇关于JavaScript设计模式之命令模式的文章就介绍到这了,更多相关JavaScript 命令模式内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！