利用JavaScript中的高阶函数和闭包实现命令模式

// 命令生成器函数
function createCommand(fn) {
  return {
    execute: fn,
  };
}
// 具体命令函数
function openDocument() {
  console.log("打开文档");
}
function saveDocument() {
  console.log("保存文档");
}
// 创建具体命令对象
const openCommand = createCommand(openDocument);
const saveCommand = createCommand(saveDocument);
// 执行具体命令
openCommand.execute();
saveCommand.execute();

// 命令接口构造函数
function Command() {}
// 执行命令的方法
Command.prototype.execute = function () {};
// 撤销命令的方法
Command.prototype.undo = function () {};
// 具体命令构造函数 - 绘制线条
function DrawLineCommand(receiver, startPoint, endPoint) {
  // 设置接收者对象
  this.receiver = receiver;
  // 绘制线条的起始点
  this.startPoint = startPoint;
  // 绘制线条的结束点
  this.endPoint = endPoint;
  // 保存先前的状态，用于撤销操作
  this.previousState = null;
}
// 继承自命令接口
DrawLineCommand.prototype = Object.create(Command.prototype);
// 实现execute方法，执行绘制线条操作
DrawLineCommand.prototype.execute = function () {
  // 保存先前的状态
  this.previousState = this.receiver.drawLine(this.startPoint, this.endPoint);
};
// 实现undo方法，撤销绘制线条操作
DrawLineCommand.prototype.undo = function () {
  // 恢复到先前的状态
  if (this.previousState) {
    this.receiver.restoreState(this.previousState);
    this.previousState = null;
  }
};
// 具体命令构造函数 - 删除图形
function DeleteShapeCommand(receiver, shape) {
  // 设置接收者对象
  this.receiver = receiver;
  // 要删除的图形
  this.shape = shape;
  // 保存先前的状态，用于撤销操作
  this.previousState = null;
}
// 继承自命令接口
DeleteShapeCommand.prototype = Object.create(Command.prototype);
// 实现execute方法，执行删除图形操作
DeleteShapeCommand.prototype.execute = function () {
  // 保存先前的状态
  this.previousState = this.receiver.deleteShape(this.shape);
};
// 实现undo方法，撤销删除图形操作
DeleteShapeCommand.prototype.undo = function () {
  // 恢复到先前的状态
  if (this.previousState) {
    this.receiver.restoreState(this.previousState);
    this.previousState = null;
  }
};
// 接收者构造函数 - 图形编辑器
function GraphicsEditor() {
  // 绘图工具
  this.tools = [];
  // 图形
  this.shapes = [];
}
// 设置当前的绘图工具
GraphicsEditor.prototype.setTool = function (tool) {
  this.activeTool = tool;
};
// 添加图形
GraphicsEditor.prototype.addShape = function (shape) {
  this.shapes.push(shape);
};
// 绘制线条
GraphicsEditor.prototype.drawLine = function (startPoint, endPoint) {
  var line = new Line(startPoint, endPoint);
  this.shapes.push(line);
  return this.getState();
};
// 删除图形
GraphicsEditor.prototype.deleteShape = function (shape) {
  var index = this.shapes.indexOf(shape);
  if (index !== -1) {
    this.shapes.splice(index, 1);
    return this.getState();
  }
  return null;
};
// 获取当前的图形状态
GraphicsEditor.prototype.getState = function () {
  // 返回当前图形状态的副本
  return this.shapes.map(function (shape) {
    return shape.clone();
});
// 恢复到指定的图形状态 
GraphicsEditor.prototype.restoreState = function (state) { this.shapes = state.map(function (shape) { return shape.clone(); }); };
// 具体图形构造函数 - 线条 
function Line(startPoint, endPoint) { this.startPoint = startPoint; this.endPoint = endPoint; }
// 克隆线条对象 
Line.prototype.clone = function () { return new Line(this.startPoint, this.endPoint); };
// 创建图形编辑器对象 
var editor = new GraphicsEditor();
// 创建具体命令对象 - 绘制线条 
var startPoint = { x: 10, y: 20 }; 
var endPoint = { x: 100, y: 200 }; 
var drawLineCommand = new DrawLineCommand(editor, startPoint, endPoint);
// 执行绘制线条命令 
drawLineCommand.execute();
// 撤销绘制线条命令 
drawLineCommand.undo();