前端设计模式(6)--组合模式

101 阅读1分钟

一, 定义

用小的对象构建更大的对象, 而这些小对象又是由更小的'孙对象'构成的. 组合模式将对象组合成树结构,以表示"部分-整体"的层次结构,除了表示树形结构以外,组合模式的另一个好处是通过对象的多态性表现,使得用户对单个对象和组合对象的使用具有一致性.

二, 场景和实现

我们有个万能遥控器, 可以做如下命令: 1,打开空凋 2,打开电视和音响 3,关门,开电脑,打开QQ

// 组合模式
// 1, 打开空凋;
// 2, 打开电视和音响;
// 3, 关门, 开电脑, 打开QQ;

// 宏命令(组合对象)
const MacroCommand = function () {
  return {
    commandList: [],
    add: function (command) {
      this.commandList.push(command);
    },
    execute: function () {
      this.commandList.forEach((command) => {
        command.execute();
      });
    },
  };
};

// 单个对象
//1, 打开空调
const openAcCommand = {
  execute: function () {
    console.log('打开空调');
  },
};
//2, 打开电视
const openTvCommand = {
  execute: () => {
    console.log('打开电视');
  },
};
//3, 打开音响
const openSoundCommand = {
  execute: () => {
    console.log('打开音响');
  },
};
// 组合对象(电视和音响)
const macroCommand1 = MacroCommand();
macroCommand1.add(openTvCommand);
macroCommand1.add(openSoundCommand);

//4, 关门
const closeDoorCommand = {
  execute: () => {
    console.log('关门');
  },
};
//5, 开电脑
const openPCCommand = {
  execute: () => {
    console.log('开电脑');
  },
};

//6, 打开QQ
const openQQCommand = {
  execute: () => {
    console.log('打开QQ');
  },
};
// 组合对象(关门, 开电脑, 打开QQ)
const macroCommand2 = MacroCommand();
macroCommand2.add(closeDoorCommand);
macroCommand2.add(openPCCommand);
macroCommand2.add(openQQCommand);

// 组合成一个对象
const rootCommand = MacroCommand();
rootCommand.add(openAcCommand);
rootCommand.add(macroCommand1);
rootCommand.add(macroCommand2);

//执行整个流程
rootCommand.execute();

三, 总结

组合对象是一系列叶子对象的组合, 组合对象只是将请求传递给子对象执行, 组合对象和叶子对象应该具有一致的接口,这样对于使用者来说, 他们都是一致的.