【设计模式】组合模式和(宏)命令模式

组合模式

组合模式在对象间形成树形结构；组合模式中基本对象和组合对象被一致对待：无须关心对象有多少层，调用时只需在根部进行调用。

它在我们树型结构的问题中，模糊了简单元素和复杂元素的概念，客户程序可以向处理简单元素一样来处理复杂元素，从而使得客户程序与复杂元素的内部结构解耦。

js 复制代码

// 组合模式
const Folder = function(folderName) {
  this.folderName = folderName;
  this.files = [];
};

Folder.prototype.add = function(file) {
  this.files.push(file);
};

Folder.prototype.scan = function() {
  console.log(`开始扫描文件夹：${this.folderName}`);
  for (let i = 0; i < this.files.length; i++) {
    this.files[i].scan();
  }
};

const File = function(fileName) {
  this.fileName = fileName;
};

File.prototype.add = function() {
  throw new Error('文件下不能添加文件');
};

File.prototype.scan = function () {
  console.log(`开始扫描文件：${this.fileName}`);
}

// 测试
const folder = new Folder('文件夹');
const file1 = new File('文件1');
const file2 = new File('文件2');
folder.add(file1);
folder.add(file2);
folder.scan();
/*
开始扫描文件夹：文件夹
开始扫描文件：文件1
开始扫描文件：文件2
 */

这里是使用了扫描文件的示例，还有一个应用场景是动态声明 menu 菜单栏。

命令模式

有时候需要向某些对象发送请求，但是并不知道请求的接收者是谁，也不知道被请求的操作是什么。需要一

种松耦合的方式来设计程序，使得发送者和接收者能够消除彼此，之间的耦合关系。

命令模式由三种角色构成：

发布者invoker(发出命令，调用命令对象，不知道如何执行与谁执行)；
接收者receiver(提供对应接口处理请求，不知道谁发起请求)，
命令对象command(接收命令，调用接收者对应接口处理发布者的请求)

js 复制代码

// 命令模式
class Receiver {
  execute() {
    console.log('接收者执行命令');
  }
}
class Command {
  constructor(receiver) {
    this.receiver = receiver;
  }
  execute() {
      console.log('命令对象->接收者->对应接口执行');
    this.receiver.execute();
  }
}
class Invoker {
  constructor(command) {
    this.command = command;
  }
  execute() {
      console.log('调用者执行命令');
    this.command.execute();
  }
}

/**
 * 调用者执行命令
 * 命令对象->接收者->对应接口执行
 * 接收者执行命令
 */
const receiver = new Receiver();
const command = new Command(receiver);
const invoker = new Invoker(command);
invoker.execute();

宏命令模式

js 复制代码

// 宏命令模式
const MacroCommand = function () {
    return {
        commandsList: [],
        add: function (command) {
            this.commandsList.push(command);
        },
        execute: function () {
            for (let item of this.commandsList) {
                item.execute();
            }
        }
    }
}

const closeDoorCommand = {
    execute: function () {
        console.log('关门');
    }
}

const openPcCommand = {
    execute: function () {
        console.log('开电脑');
    }
}

const openQQCommand = {
    execute: function () {
        console.log('登录QQ');
    }
}

const macroCommand = MacroCommand();
macroCommand.add(closeDoorCommand);
macroCommand.add(openPcCommand);
macroCommand.add(openQQCommand);
macroCommand.execute();