设计模式之------命令模式

一、命令模式定义与核心思想

命令模式(Command Pattern) ‌ 是一种行为型设计模式,其核心是将‌请求 ‌或‌操作‌封装为独立对象,实现调用者(发送请求)与接收者(执行操作)的解耦。通过这种方式,可以灵活管理请求的队列化、撤销、重做等复杂逻辑‌。

  • 核心思想‌:将"动作"抽象为可传递、存储的对象,使得操作本身具备独立性和可扩展性‌。

二、命令模式的结构组成

角色 作用
Command 抽象命令接口,声明执行方法(如 execute())‌。
ConcreteCommand 具体命令类,绑定接收者并实现操作细节(如复制、粘贴命令)‌。
Receiver 实际操作执行者(如编辑器、DOM元素)‌。
Invoker 调用者,触发命令执行(如按钮、任务调度器)‌。

三、应用场景与意义

1. 典型应用场景
  • 需要支持撤销/重做‌:例如文本编辑器的操作历史记录‌47。
  • 多步骤任务管理‌:如批量表单提交、动画序列执行‌46。
  • 复杂交互解耦‌:按钮点击触发不同业务逻辑,避免代码冗余‌57。
2. 核心意义
  • 解耦调用与执行‌:发送者无需关注接收者的具体实现‌。
  • 灵活扩展性‌:新增命令无需修改现有代码(符合开闭原则)‌。
  • 操作管理能力‌:支持队列化、日志记录、事务处理等高级功能‌。

四、由浅入深的三层案例

1. 基础示例:按钮触发命令
javascript 复制代码
// 命令接口
class Command {
  execute() {}
}

// 具体命令:切换主题
class ToggleThemeCommand extends Command {
  constructor(receiver) {
    super();
    this.receiver = receiver; // Receiver为DOM元素
  }
  execute() {
    this.receiver.classList.toggle('dark-mode');
  }
}

// 调用者:按钮绑定命令
const button = document.getElementById('theme-btn');
button.onclick = new ToggleThemeCommand(document.body).execute;

关键点‌:按钮(Invoker)与DOM操作(Receiver)解耦,支持动态替换命令‌。


2. 进阶示例:支持撤销的操作历史
kotlin 复制代码
class HistoryManager {
  constructor() {
    this.stack = [];
  }
  push(command) {
    this.stack.push(command);
  }
  undo() {
    const command = this.stack.pop();
    command?.undo(); // 命令需实现undo方法
  }
}

// 具体命令:文本输入(支持撤销)
class TextInputCommand {
  constructor(editor, newText) {
    this.editor = editor;
    this.prevText = editor.textContent;
    this.newText = newText;
  }
  execute() {
    this.editor.textContent = this.newText;
  }
  undo() {
    this.editor.textContent = this.prevText;
  }
}

// 使用示例
const editor = document.getElementById('editor');
const history = new HistoryManager();
history.push(new TextInputCommand(editor, 'Hello World'));
history.undo(); // 恢复为原始文本

关键点‌:通过命令对象记录操作状态,实现撤销功能‌。


3. 高阶示例:动画队列调度
javascript 复制代码
class AnimationQueue {
  constructor() {
    this.queue = [];
  }
  addCommand(command) {
    this.queue.push(command);
  }
  run() {
    this.queue.reduce((prev, cmd) => 
      prev.then(() => cmd.execute()), Promise.resolve()
    );
  }
}

// 具体命令:DOM元素动画
class MoveCommand {
  constructor(element, x, y) {
    this.element = element;
    this.x = x;
    this.y = y;
  }
  execute() {
    return new Promise(resolve => {
      this.element.style.transform = `translate(${this.x}px, ${this.y}px)`;
      this.element.addEventListener('transitionend', resolve);
    });
  }
}

// 使用示例
const box = document.getElementById('box');
const queue = new AnimationQueue();
queue.addCommand(new MoveCommand(box, 100, 0));
queue.addCommand(new MoveCommand(box, 100, 100));
queue.run(); // 顺序执行动画

关键点‌:通过命令队列管理异步操作,实现复杂动画序列‌。


命令模式通过将‌操作对象化‌,解决了前端开发中调用与执行的强耦合问题,适用于需要动态管理、扩展或记录用户交互的场景。从简单的按钮绑定到复杂的任务队列,其分层设计思想能够显著提升代码的可维护性和灵活性‌。

相关推荐
ygria4 小时前
样式工程化:如何实现Design System
前端·前端框架·前端工程化
bobz9654 小时前
QoS 中的优先级相关的设计
面试
就是帅我不改4 小时前
揭秘Netty高性能HTTP客户端:NIO编程的艺术与实践
后端·面试·github
墨渊君5 小时前
“蒙”出花样!用 CSS Mask 实现丝滑视觉魔法
前端·css
isysc15 小时前
面了一个校招生,竟然说我是老古董
java·后端·面试
uhakadotcom6 小时前
静态代码检测技术入门:Python 的 Tree-sitter 技术详解与示例教程
后端·面试·github
huabuyu6 小时前
基于 React + MarkdownIt 的 Markdown 渲染器实践:支持地图标签和长按复制
前端
芦苇Z6 小时前
HTML <a> 标签的 rel 属性全解析:安全、隐私与 SEO 最佳实践
前端·html
在这儿不行6 小时前
Android 15边到边模式
前端
源猿人6 小时前
企业级文件浏览系统的Vue实现:架构设计与最佳实践
前端·javascript·数据可视化