全能指挥官:玩转JavaScript命令模式,让代码听你的话!
命令模式的含义
- 命令模式指的是一个执行某些特定的指令。
- 命令模式的示例 demo:
class Command {
execute() {}
}
class OpenDocumentCommand extends Command {
constructor(document) {
super();
this.document = document;
}
execute() {
this.document.open();
}
}
class SaveDocumentCommand extends Command {
constructor(document) {
super();
this.document = document;
}
execute() {
this.document.save();
}
}
class Document {
open() {
console.log("打开文档");
}
save() {
console.log("保存文档");
}
}
class Button {
constructor(command) {
this.command = command;
}
click() {
this.command.execute();
}
}
const document = new Document();
const openCommand = new OpenDocumentCommand(document);
const saveCommand = new SaveDocumentCommand(document);
const openButton = new Button(openCommand);
const saveButton = new Button(saveCommand);
openButton.click();
saveButton.click();
命令模式的特点
- 在命令模式中,Command 对象拥有更长的生命周期。还支持撤销,排队等操作。而设计模式的主题总是会把不变的事物和变化的事物分离出来,命令模式也不例外。
JavaScript 中的命令模式
- 所谓的命令模式,就是给对象的某个方法取一个 execute 的名字,引入 command 对象和 receiver 这两个无中生有的角色无非是把简单的事情复杂化了。
- 命令模式的由来,其实是回调(callback)函数的一个面向对象的替代品。
宏命令
- 宏命令是一组命令的集合,可通过宏命令的方式,可一次执行一批命令。
完整版demo:
class Command {
execute() {}
undo() {}
redo() {}
}
class OpenDocumentCommand extends Command {
constructor(document) {
super();
this.document = document;
}
execute() {
this.document.open();
}
undo() {
this.document.close();
}
redo() {
this.execute();
}
}
class SaveDocumentCommand extends Command {
constructor(document) {
super();
this.document = document;
}
execute() {
this.document.save();
}
undo() {
this.document.restore();
}
redo() {
this.execute();
}
}
class Document {
constructor(name) {
this.name = name;
this.content = "";
this.savedContent = "";
}
open() {
console.log(`打开文档:${this.name}`);
}
close() {
console.log(`关闭文档:${this.name}`);
}
save() {
this.savedContent = this.content;
console.log(`保存文档:${this.name}`);
}
restore() {
this.content = this.savedContent;
console.log(`恢复文档:${this.name}`);
}
setContent(content) {
this.content = content;
console.log(`设置文档内容:${this.name}`);
}
getContent() {
return this.content;
}
}
class Button {
constructor() {
this.commandQueue = [];
this.undoStack = [];
this.redoStack = [];
}
addToQueue(command) {
this.commandQueue.push(command);
}
executeQueue() {
console.log("执行命令队列:");
while (this.commandQueue.length > 0) {
const command = this.commandQueue.shift();
command.execute();
this.undoStack.push(command);
}
}
undo() {
if (this.undoStack.length === 0) {
console.log("没有可撤销的命令");
return;
}
const command = this.undoStack.pop();
command.undo();
this.redoStack.push(command);
console.log("撤销上一次命令");
}
redo() {
if (this.redoStack.length === 0) {
console.log("没有可重做的命令");
return;
}
const command = this.redoStack.pop();
command.redo();
this.undoStack.push(command);
console.log("重做上一次撤销的命令");
}
}
const document = new Document("example.txt");
const button = new Button();
const openCommand = new OpenDocumentCommand(document);
const saveCommand = new SaveDocumentCommand(document);
button.addToQueue(openCommand);
button.addToQueue(saveCommand);
button.executeQueue();
button.undo();
button.redo();
- 在这个示例中,我们首先定义了命令接口Command,其中包含execute、undo和redo方法。然后创建了两个具体的命令类OpenDocumentCommand和SaveDocumentCommand,它们分别实现了命令的执行、撤销和重做操作。
- 接着,我们定义了文档类Document作为接收者,其中包含了打开文档、关闭文档、保存文档和恢复文档的操作。
- 然后,我们创建了调用者类Button,它包含命令队列、撤销栈和重做栈的管理。通过addToQueue方法将命令加入队列,executeQueue方法执行队列中的命令,undo方法撤销上一次执行的命令,redo方法重做上一次撤销的命令。
- 在示例的最后,我们创建了文档对象、按钮对象,并关联了打开文档和保存文档命令。然后将命令加入队列,执行命令队列,撤销命令,重做命令。
命令模式的优缺点
- 优点:
- 解耦发送者和接收者:命令模式通过将请求封装为命令对象,将发送者和接收者解耦。发送者只需要知道如何触摸命令,而不需要关心具体的接收者和执行操作。
- 易扩展:由于命令模式将请求封装成了独立的命令对象,因此添加一个命令只需要实现一个新的命令的类,不需要修改原有的代码结构
- 支持队列化和延迟执行:命令模式将多个命令对象组合成一个命令队列(宏命令),实现批量执行和撤销操作。也可以实现延迟执行,将命令对象存储起来,在需要的时候在执行。
- 支持撤销和重做:通过保存命令的执行历史,可实现撤销和重做操作,对于用户操作的回退和恢复非常有用。
- 支持日志和记录:可记录命令的执行日志,用于系统的跟踪和调试。
- 缺点:
- 增加了类的数量:随着引入命令模式的增加,会导致类的数量增加,增加代码的复杂性。
- 命令执行效率降低:由于将命令模式需要封装成对象,因此会增加一定的执行开销,对于性能要求较高的场景可能会有影响。
命令模式的适用场景
- 撤销和重做
- 异步任务处理:若在后台处理数据或执行长时间运行的操作。
- 日志记录和系统操作记录
- 队列和调度任务:可将命令对象添加到队列中,然后按照队列中的顺序依次执行。
命令模式的最佳实践
- 封装命令:将每个操作封装为独立的命令对象
- 使用接口和抽象类:定义一个接口和抽象类来表示命令对象,以确保命令对象具有抑制的方法和属性
- 参数化命令:在命令对象中传递参数,使命令对象能够执行不同的操作
- 解耦调用者和接收者:调用者只需要知道如何触发命令,而不需要了解命令的具体实现。
- 支持的撤销操作
- 宏命令
- 单一职责原则:每个命令对象应该只负责一个具体的操作或请求,这样可以确保命令对象的职责清晰,代码结构清晰。
- 代码的灵活性和可扩展性
特殊字符描述:
- 问题标注
Q:(question)
- 答案标注
R:(result)
- 注意事项标准:
A:(attention matters)
- 详情描述标注:
D:(detail info)
- 总结标注:
S:(summary)
- 分析标注:
Ana:(analysis)
- 提示标注:
T:(tips)