javascript设计模式 – 组合模式原理与应用实例分析

下面是本文“javascript设计模式 – 组合模式原理与应用实例分析”的完整攻略。

概述

组合模式是一种结构型设计模式，它将对象组合成树形结构以表示“部分-整体”的层次结构。组合模式使得用户对单个对象和组合对象的使用具有一致性，用户无需关心所使用对象的具体类型，只需要关心对象之间的层次关系。

模式结构

组合模式包含以下角色：
- Component（抽象构件）：定义组合中子对象的通用接口。
- Leaf（叶子节点）：表示组合中的单个对象，没有子节点。
- Composite（组合节点）：表示组合中的复合对象，可以添加和删除子节点。

实例分析

利用组合模式，我们可以将树形结构中的节点和叶子看做是组合模式中的‘组合节点’和‘叶子节点’，然后通过不断的将叶子作为节点的子节点来形成树形结构。

示例一

实现一个包含文件和目录的树形结构，在用户选择目录时可以自动选中该目录下所有的文件和文件夹。

class File {
  constructor(name) {
    this.name = name;
  }
  getSelectedFiles() {
    return [this];
  }
}

class Directory {
  constructor(name) {
    this.name = name;
    this.files = [];
  }
  add(file) {
    this.files.push(file);
  }
  remove(file) {
    const index = this.files.indexOf(file);
    this.files.splice(index, 1);
  }
  getSelectedFiles() {
    let result = [];
    for (let file of this.files) {
      result = result.concat(file.getSelectedFiles());
    }
    return result;
  }
}

// Usage:
const root = new Directory('root');
const dir1 = new Directory('dir1');
const dir2 = new Directory('dir2');
const file1 = new File('file1');
const file2 = new File('file2');
const file3 = new File('file3');

dir1.add(file1);
dir1.add(file2);
dir2.add(file3);
root.add(dir1);
root.add(dir2);

// Select the root directory and log all selected files
const selectedFiles = root.getSelectedFiles();
console.log(selectedFiles);

示例二

实现一个简单的菜单组件，在菜单中可以包含子菜单或者菜单项。

class MenuItem {
  constructor(name, action) {
    this.name = name;
    this.action = action;
  }
  doAction() {
    this.action();
  }
}

class Menu {
  constructor(name) {
    this.name = name;
    this.menuItems = [];
  }
  add(menuItem) {
    this.menuItems.push(menuItem);
  }
  remove(menuItem) {
    const index = this.menuItems.indexOf(menuItem);
    this.menuItems.splice(index, 1);
  }
  display() {
    console.log(this.name);
    for (let menuItem of this.menuItems) {
      console.log(menuItem.name);
    }
  }
}

// Usage:
const saveAction = () => console.log('Saving document');
const exitAction = () => console.log('Exiting application');

const menu = new Menu('File');
const menuItem1 = new MenuItem('Save', saveAction);
const menuItem2 = new MenuItem('Exit', exitAction);

menu.add(menuItem1);
menu.add(menuItem2);

const subMenu = new Menu('Export');
const subMenuItem1 = new MenuItem('PDF', () => console.log('Exporting PDF'));
const subMenuItem2 = new MenuItem('DOC', () => console.log('Exporting DOC'));

subMenu.add(subMenuItem1);
subMenu.add(subMenuItem2);

menu.add(subMenu);

menu.display();

// Select the Exit menu item
menuItem2.doAction();

总结

组合模式是一种简单但非常有效的模式，使我们能够构建具有“部分-整体”层次结构的对象。组合模式提高了代码逻辑的清晰度，简化了代码维护，也使得我们的代码更加灵活和可扩展。