JavaScript命令模式详解：原理、应用与代码实现
本文深入解析JavaScript中的命令模式，阐述发令者、执行者与命令对象三者如何协作以实现操作解耦。通过饭馆点餐的生活案例与账户权限控制的代码实例，展示命令模式的实际应用，并介绍其在事务系统与撤销/回滚功能中的扩展用法。
前言
命令模式的核心结构包含三个关键角色：
- 发令者（Invoker）：负责发出命令并调用执行逻辑，但不关心具体如何执行以及由谁执行。
- 执行者（Receiver）：提供处理命令请求的具体接口，它不关心命令是由谁发出的。
- 命令对象（Command）：负责接收发令者的指令，并调用执行者来完成具体任务。
通过将操作及其后续执行所需的信息封装在命令对象中，发令者只需发布命令，由命令对象驱动执行者工作。这种机制实现了执行者与发令者的解耦，从而降低了代码的耦合度。
生活中的命令设计模式
以去饭馆吃饭为例：顾客（发令者）先告诉服务员想要吃的菜品及特殊要求，服务员通过点餐系统将指令传递给厨房（命令对象），厨师（执行者）根据要求制作菜品。制作完成后，厨师通知服务员，服务员将菜品端给顾客享用。
在上述生活场景中，顾客是发令者，服务员充当命令对象的角色，而厨师则是实际的执行者。
工作中的命令设计模式
在软件开发中，当我们需要向某些对象发起请求，但事先不知道接收者是谁，也不清楚具体执行什么操作时，命令模式是一个理想的选择。
接下来，我们通过一个具体需求来演示：实现一键封锁账户权限和一键解封账户权限的功能。
首先构建页面结构，添加两个按钮用于控制权限的开启与关闭。
<button id="onbtn">开启权限</button>
<button id="offbtn">关闭权限</button>
接着，使用JavaScript获取这两个权限控制按钮的DOM元素。
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();
}
}
创建好各个类的实例后，通过JavaScript为按钮绑定事件。在事件处理函数中，操作命令者实例来发布命令。
//执行者实例
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 命令模式内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！
JS处理含Emoji或中文的字符串转数组乱码问题
2026-11-05 16:12:28
JS怎么使用展开运算符合并对象
2026-11-05 14:42:18
ES6+环境下判断JS对象为空的简洁写法
2026-11-05 12:12:23
怎么通过replacer函数自定义JS中JSON的格式化输出
2026-11-05 11:19:44
JS正则表达式基础：字面量与RegExp构造函数的区别及常用元字符
2026-11-05 11:16:58