TypeScript设计模式（11）：命令模式

什么是命令模式

命令模式将请求封装成一个对象，使得可以用不同的请求对客户进行参数化，对请求排队或者记录请求日志，以及支持可撤销的操作。简单来说，它把一个操作的发起者和执行者解耦，发起者只需要知道如何发送请求，而不必关心具体的执行逻辑，执行逻辑由具体的命令对象负责。

命令模式的结构

命令模式包含以下几个核心角色：

1. 命令接口（Command Interface） ：定义了一个执行操作的方法，所有具体命令类都必须实现这个接口。

2. 具体命令类（Concrete Command） ：实现命令接口，持有一个接收者对象的引用，并在执行方法中调用接收者的相应操作。

3. 接收者（Receiver） ：真正执行操作的对象，它知道如何执行与请求相关的具体操作。

4. 调用者（Invoker） ：负责调用命令对象的执行方法，它不关心具体的命令实现，只与命令接口交互。

在 TypeScript 中实现命令模式

下面通过一个简单的示例来展示如何在 TypeScript 中实现命令模式。假设我们有一个简单的文本编辑器，需要实现撤销和重做操作。

定义命令接口

首先，定义一个命令接口Command，它包含一个execute方法用于执行命令，一个undo方法用于撤销命令。

interface Command {
    execute(): void;
    undo(): void;
}

定义接收者

接着，定义接收者TextEditor，它包含实际的文本编辑操作，如插入文本和删除文本。

class TextEditor {
    private text: string = '';
    insert(text: string) {
        this.text += text;
        console.log(`插入文本: ${text}`);
    }
    delete(count: number) {
        this.text = this.text.slice(0, -count);
        console.log(`删除 ${count} 个字符`);
    }
    getText() {
        return this.text;
    }
}

定义具体命令类

然后，定义具体的命令类，如InsertCommand和DeleteCommand，它们实现了Command接口，并在execute和undo方法中调用接收者TextEditor的相应操作。

class InsertCommand implements Command {
    constructor(private editor: TextEditor, private text: string) {}
    execute() {
        this.editor.insert(this.text);
    }
    undo() {
        this.editor.delete(this.text.length);
    }
}
class DeleteCommand implements Command {
    constructor(private editor: TextEditor, private count: number) {}
    execute() {
        this.editor.delete(this.count);
    }
    undo() {
        this.editor.insert('x'.repeat(this.count)); // 假设插入'x'来恢复删除的内容
    }
}

定义调用者

最后，定义调用者CommandInvoker，它负责存储和执行命令，以及管理命令的撤销和重做。

class CommandInvoker {
    private history: Command[] = [];
    private index: number = 0;
    execute(command: Command) {
        command.execute();
        this.history.splice(this.index, this.history.length - this.index);
        this.history.push(command);
        this.index++;
    }
    undo() {
        if (this.index > 0) {
            this.index--;
            const command = this.history[this.index];
            command.undo();
        }
    }
    redo() {
        if (this.index < this.history.length) {
            const command = this.history[this.index];
            command.execute();
            this.index++;
        }
    }
}

使用命令模式

现在可以使用上述定义的命令模式来操作文本编辑器了。

const editor = new TextEditor();
const invoker = new CommandInvoker();
const insertCommand1 = new InsertCommand(editor, 'Hello, ');
const insertCommand2 = new InsertCommand(editor, 'World!');
const deleteCommand = new DeleteCommand(editor, 6);
invoker.execute(insertCommand1);
invoker.execute(insertCommand2);
console.log('当前文本:', editor.getText()); // 输出: 当前文本: Hello, World!
invoker.execute(deleteCommand);
console.log('当前文本:', editor.getText()); // 输出: 当前文本: Hello, 
invoker.undo();
console.log('当前文本:', editor.getText()); // 输出: 当前文本: Hello, World!
invoker.redo();
console.log('当前文本:', editor.getText()); // 输出: 当前文本: Hello, 

命令模式的优点

1. 解耦调用者和接收者：调用者不需要知道具体的接收者和执行逻辑，只需要与命令接口交互，提高了代码的可维护性和可扩展性。

2. 方便添加新命令：新增具体命令类时，不需要修改调用者的代码，符合开闭原则。

3. 支持命令的排队、记录日志和撤销重做：通过管理命令对象，可以轻松实现命令的排队执行、记录执行日志以及撤销和重做操作。

命令模式的应用场景

1. 图形界面应用：如菜单命令、按钮点击事件等，将用户操作封装成命令对象，便于管理和扩展。

2. 游戏开发：游戏中的各种操作，如角色移动、攻击、技能释放等，可以用命令模式来实现，方便实现撤销和重做功能。

3. 事务处理：在数据库事务中，将一系列操作封装成命令，方便进行事务的提交、回滚等操作。

总结

命令模式是一种强大的设计模式，它通过将请求封装成对象，实现了调用者和接收者的解耦，为软件设计带来了更高的灵活性和可维护性。在 TypeScript 中，通过接口和类的组合，可以很方便地实现命令模式，应用于各种不同的场景。希望本文能够帮助读者深入理解命令模式，并在实际项目中灵活运用。