命令模式属于行为型设计模式，其核心思想是将请求发送者与请求接收者完全解耦。在传统的软件开发中，调用者通常直接实例化接收者并调用其方法，这导致两者之间紧密耦合。一旦接收者的方法发生变化，调用者的代码也必须随之修改。通过引入命令对象，调用者只需要与抽象的命令接口交互，无需关心具体的接收者是谁以及如何执行操作。
这种设计模式特别适用于以下几种业务场景。首先是需要实现事务化操作的场景，即一组操作必须全部成功或全部失败，命令模式可以方便地记录操作日志以便回滚。其次是需要支持撤销和重做功能的交互应用，例如文本编辑器或图形绘制工具。最后，当系统需要支持任务排队、延迟执行或宏命令批量执行时，命令模式也能提供优雅的解决方案。在前端开发中，我们经常用它来处理复杂的UI事件交互，比如菜单点击、按钮触发以及拖拽操作的历史记录。
使用闭包快速实现基础命令模式
在JavaScript这种支持高阶函数的语言中，实现命令模式比传统的面向对象语言更加简洁。由于函数是一等公民，我们可以直接将函数作为命令对象传递，利用闭包来保存调用上下文和参数，而不需要专门定义一个复杂的命令类。这种方式不仅减少了样板代码，还保留了命令模式解耦的核心优势。
下面通过一个简单的页面按钮交互来演示基础实现。假设页面上有一个<button>元素，点击它需要触发某个服务请求。我们不直接在按钮的事件监听器里写业务逻辑，而是将逻辑封装成一个命令函数。
// 接收者对象，包含具体的业务逻辑
const receiver = {
execute: function(data) {
console.log('接收者处理数据:', data);
}
};
// 命令工厂函数，利用闭包封装请求
function createCommand(receiver, data) {
return {
execute: function() {
receiver.execute(data);
}
};
}
// 调用者，这里模拟一个UI按钮
const button = {
setCommand: function(command) {
this.command = command;
},
onClick: function() {
if (this.command) {
this.command.execute();
}
}
};
// 组装并执行
const command = createCommand(receiver, '用户点击事件');
button.setCommand(command);
button.onClick(); // 输出: 接收者处理数据: 用户点击事件
在上述代码中，createCommand函数充当了命令对象的构造器。它返回一个包含execute方法的对象，这个方法内部通过闭包引用了传入的接收者和数据。调用者button完全不知道接收者的存在，它只负责在合适的时机调用命令的execute方法。如果未来业务逻辑需要修改，比如增加权限校验，我们只需要修改createCommand内部的逻辑，或者传入不同的接收者，而调用者的代码完全不需要改动。这种解耦使得代码的维护性和可测试性大幅提升。
进阶应用：实现宏命令与撤销操作
命令模式的真正威力在于其强大的扩展能力，特别是在处理复杂业务逻辑时。宏命令和撤销操作是命令模式最经典的两个高级应用。宏命令允许我们将多个基础命令组合成一个更大的命令，执行宏命令等同于按顺序执行其包含的所有子命令。而撤销操作则要求命令对象不仅知道如何执行，还要知道如何回退到执行前的状态。
以智能家居系统为例，我们可以定义开灯、关门等多个基础命令，然后将它们组合成一个回家模式的宏命令。同时，为每个命令增加undo方法以支持状态回滚。
// 基础命令：开灯
const lightOnCommand = {
execute: function() {
console.log('开灯');
},
undo: function() {
console.log('关灯');
}
};
// 基础命令：开门
const doorOpenCommand = {
execute: function() {
console.log('开门');
},
undo: function() {
console.log('关门');
}
};
// 宏命令：回家模式
const macroCommand = {
commands: [],
add: function(command) {
this.commands.push(command);
},
execute: function() {
this.commands.forEach(function(cmd) {
cmd.execute();
});
},
undo: function() {
// 撤销时通常需要反向执行
this.commands.slice().reverse().forEach(function(cmd) {
cmd.undo();
});
}
};
// 组装宏命令
macroCommand.add(doorOpenCommand);
macroCommand.add(lightOnCommand);
// 执行宏命令
console.log('--- 执行回家模式 ---');
macroCommand.execute();
// 输出: 开门, 开灯
// 撤销宏命令
console.log('--- 撤销回家模式 ---');
macroCommand.undo();
// 输出: 关灯, 关门
在这个进阶示例中，macroCommand本身也是一个命令对象，它具有与基础命令相同的execute和undo方法。这体现了设计模式中的组合模式思想，宏命令可以包含其他宏命令，形成树状结构。撤销操作的实现关键在于保存历史状态，这里通过反向遍历子命令并调用其undo方法来实现。在实际的前端应用中，比如画板工具的撤销功能，我们可以在每次执行绘制命令时将像素数据保存到栈中，撤销时弹出栈顶状态并重绘画布。通过这种方式，我们可以构建出极其灵活且具备高度历史回溯能力的交互系统。
命令模式在前端架构中的深度思考
在现代前端框架盛行的今天，命令模式依然有着不可替代的作用。虽然React、Vue等框架通过数据驱动视图的方式减少了直接操作DOM的需求，但在处理复杂的状态变更逻辑时，命令模式依然能提供清晰的边界。例如在Redux状态管理中，所有的状态变更都必须通过派发一个Action来触发，这个Action本质上就是一个命令对象。它携带了操作类型和数据，由Reducer这个接收者来真正处理状态变更。这种架构设计彻底剥离了视图层与状态层的耦合，使得状态变更变得可预测、可追溯。
此外，在实现复杂的交互组件如可拖拽排序的列表时，直接操作DOM或修改数据数组往往会导致代码难以维护。如果我们将每一次拖拽移动封装成一个移动命令，记录源索引和目标索引，不仅可以轻松实现拖拽逻辑，还能非常方便地实现拖拽撤销功能。当用户误操作时，只需调用对应命令的undo方法即可恢复到拖拽前的状态。这种将行为对象化的思路，是提升前端代码工程质量的重要手段。通过将每个操作视为独立的实体，我们可以更好地管理复杂的交互流，实现操作队列、操作节流甚至操作回放等高级功能。
JavaScript命令模式设计模式修改时间：2026-08-30 05:33:06