В отличие от снапшотного undo (вопрос 265), Command Pattern хранит не полное состояние, а сами операции. Это экономнее по памяти и позволяет добавить логику (логирование, валидацию, батчинг) в одном месте. **Базовая система команд:** ```javascript // commands/CommandManager.js import { ref, computed } from 'vue' export function useCommandManager() { const history = ref([]) const undoneCommands = ref([]) const canUndo = computed(() => history.value.length > 0) const canRedo = computed(() => undoneCommands.value.length > 0) function execute(command) { command.execute() history.value.push(command) undoneCommands.value = [] // новая команда стирает redo-стек } function undo() { const command = history.value.pop() if (command) { command.undo() undoneCommands.value.push(command) } } function redo() { const command = undoneCommands.value.pop() if (command) { command.execute() history.value.push(command) } } return { execute, undo, redo, canUndo, canRedo, history } } ``` **Команды для канвас-редактора:** ```javascript // commands/shapeCommands.js export class AddShapeCommand { constructor(shapes, shape) { this.shapes = shapes this.shape = shape } execute() { this.shapes.value.push(this.shape) } undo() { const idx = this.shapes.value.findIndex(s => s.id === this.shape.id) if (idx !== -1) this.shapes.value.splice(idx, 1) } } export class MoveShapeCommand { constructor(shapes, shapeId, newX, newY) { this.shapes = shapes this.shapeId = shapeId this.newX = newX this.newY = newY // Сохраняем старую позицию для undo const shape = shapes.value.find(s => s.id === shapeId) this.oldX = shape.x this.oldY = shape.y } execute() { const shape = this.shapes.value.find(s => s.id === this.shapeId) shape.x = this.newX shape.y = this.newY } undo() { const shape = this.shapes.value.find(s => s.id === this.shapeId) shape.x = this.oldX shape.y = this.oldY } } export class DeleteShapeCommand { constructor(shapes, shapeId) { this.shapes = shapes this.shapeId = shapeId this.deletedShape = null this.deletedIndex = -1 } execute() { this.deletedIndex = this.shapes.value.findIndex(s => s.id === this.shapeId) this.deletedShape = this.shapes.value[this.deletedIndex] this.shapes.value.splice(this.deletedIndex, 1) } undo() { // Восстанавливаем на ту же позицию в массиве this.shapes.value.splice(this.deletedIndex, 0, this.deletedShape) } } // Групповая команда -- batch export class BatchCommand { constructor(commands) { this.commands = commands } execute() { this.commands.forEach(cmd => cmd.execute()) } undo() { // Отменяем в обратном порядке for (let i = this.commands.length - 1; i >= 0; i--) { this.commands[i].undo() } } } ``` **Использование в компоненте:** ```vue ``` **Команды с валидацией и логированием (расширение паттерна):** ```javascript export function useCommandManager() { // ... базовый код ... function execute(command) { // Валидация перед выполнением if (command.canExecute && !command.canExecute()) { console.warn('Command cannot execute:', command.constructor.name) return false } command.execute() history.value.push(command) undoneCommands.value = [] // Логирование для аналитики или отладки console.debug(`[Command] ${command.constructor.name} executed`) return true } // ... } // Команда с проверкой export class MoveShapeCommand { // ... canExecute() { // Нельзя двигать за пределы канваса return this.newX >= 0 && this.newY >= 0 && this.newX <= CANVAS_WIDTH && this.newY <= CANVAS_HEIGHT } } ``` ## 📌 Реальные кейсы - **Графические редакторы** -- каждое действие (рисование, перемещение, изменение свойств) -- отдельная команда - **Табличные процессоры** -- вставка строк, изменение ячеек, сортировка -- всё через команды для undo - **Drag-and-drop списки** -- перемещение элементов между колонками (Kanban) с возможностью отката - **Batch-операции** -- пользователь выделил 10 элементов и удалил -- один undo восстанавливает все 10 ## Частые ошибки ```javascript // ❌ Команда не сохраняет данные для undo class DeleteCommand { execute() { this.items.splice(index, 1) } // что удалили -- потеряно undo() { /* как восстановить? */ } } // ✅ Сохраняй всё нужное для отмены class DeleteCommand { execute() { this.deletedItem = this.items[this.index] this.items.splice(this.index, 1) } undo() { this.items.splice(this.index, 0, this.deletedItem) } } ``` ```javascript // ❌ Каждый micro-action -- отдельная команда при drag // Пользователь двигает фигуру, mousemove генерирует 100 команд // ✅ Создавай команду при завершении действия (mouseup/dragend) function onDragEnd(id, x, y) { execute(new MoveShapeCommand(shapes, id, x, y)) } ``` ```javascript // ❌ Мутация состояния напрямую, минуя команды shapes.value.push(newShape) // обошли Command Manager -- undo не сработает // ✅ Все мутации только через execute execute(new AddShapeCommand(shapes, newShape)) ``` ## Резюме Command Pattern инкапсулирует действие в объект с `execute()` и `undo()`. `CommandManager` хранит стек выполненных и отменённых команд. Batch-команда группирует несколько операций в одну единицу undo. Этот паттерн -- основа undo/redo в серьёзных редакторах, где снапшотный подход слишком дорог по памяти. Не забывай сохранять в команде всё нужное для отмены, и создавай команды на завершение действия, а не на каждый пиксель. ---

Как реализовать Command Pattern в Vue?