Что такое паттерн «Команда» и где он применим во фронтенд-разработке?

Что такое паттерн «Команда»?

Паттерн «Команда» (Command) — это поведенческий паттерн проектирования, который превращает запрос в самостоятельный объект. Этот объект содержит все необходимые данные для выполнения действия: ссылку на получателя, параметры и метод выполнения. Такой подход отделяет отправителя запроса от его исполнителя, что даёт гибкость в управлении операциями.

Как это работает?

Основные участники паттерна:

• Command — интерфейс с методом execute() и, опционально, undo().
• ConcreteCommand — конкретная реализация, которая связывает действие с получателем.
• Invoker — инициатор, который хранит команду и вызывает её выполнение.
• Receiver — объект, который непосредственно выполняет бизнес-логику.

Пример на JavaScript для фронтенда

Рассмотрим простой редактор текста с возможностью отмены действий:

class Command {
  execute() {}
  undo() {}
}

class InsertTextCommand extends Command {
  constructor(receiver, text) {
    super();
    this.receiver = receiver;
    this.text = text;
  }
  execute() {
    this.receiver.insert(this.text);
  }
  undo() {
    this.receiver.deleteLast(this.text.length);
  }
}

class TextEditor {
  constructor() {
    this.content = '';
    this.history = [];
  }
  insert(text) {
    this.content += text;
  }
  deleteLast(n) {
    this.content = this.content.slice(0, -n);
  }
  executeCommand(command) {
    command.execute();
    this.history.push(command);
  }
  undo() {
    const command = this.history.pop();
    if (command) command.undo();
  }
}

const editor = new TextEditor();
editor.executeCommand(new InsertTextCommand(editor, 'Hello'));
editor.executeCommand(new InsertTextCommand(editor, ' World'));
console.log(editor.content); // 'Hello World'
editor.undo();
console.log(editor.content); // 'Hello'

Где применяется во фронтенде?

• Undo/Redo — в текстовых редакторах, графических редакторах, формах.
• Макросы и скрипты — запись последовательности действий для повторного выполнения.
• Очереди асинхронных операций — например, отправка нескольких запросов с возможностью отката.
• Компоненты с отложенным выполнением — кнопки, которые ставят команду в очередь вместо немедленного действия.

Вывод

Паттерн «Команда» полезен, когда нужно отделить инициирование операции от её выполнения, особенно если требуется поддержка отмены, логирования или постановки в очередь. Во фронтенде он незаменим для создания интерактивных интерфейсов с историей действий и гибким управлением пользовательскими операциями.