组合模式(Composite)的树形结构处理

组合模式是一种结构型设计模式，用于将对象组合成树形结构以表示“部分-整体”的层次关系。它允许客户端以统一的方式处理单个对象和组合对象，简化了复杂结构的操作逻辑。

组合模式的核心概念

组合模式由三个关键角色构成：

1. Component（抽象组件）：定义所有对象的通用接口，包括管理子组件的方法
2. Leaf（叶子组件）：表示树中的叶子节点，没有子节点
3. Composite（复合组件）：包含子组件的容器，实现与子组件相关的操作

在JavaScript中，这种模式特别适合处理DOM树、菜单系统、文件目录等具有层级关系的场景。

基本实现方式

以下是一个典型的组合模式实现示例：

// 抽象组件
class Component {
  constructor(name) {
    this.name = name;
  }
  
  // 默认实现抛出异常，叶子节点不需要这些方法
  add(component) {
    throw new Error("不支持的操作");
  }
  
  remove(component) {
    throw new Error("不支持的操作");
  }
  
  getChild(index) {
    throw new Error("不支持的操作");
  }
  
  operation() {
    throw new Error("必须被子类实现");
  }
}

// 叶子组件
class Leaf extends Component {
  operation() {
    console.log(`执行叶子节点 ${this.name} 的操作`);
  }
}

// 复合组件
class Composite extends Component {
  constructor(name) {
    super(name);
    this.children = [];
  }
  
  add(component) {
    this.children.push(component);
  }
  
  remove(component) {
    const index = this.children.indexOf(component);
    if (index !== -1) {
      this.children.splice(index, 1);
    }
  }
  
  getChild(index) {
    return this.children[index];
  }
  
  operation() {
    console.log(`执行复合节点 ${this.name} 的操作`);
    for (const child of this.children) {
      child.operation();
    }
  }
}

实际应用示例：文件系统

组合模式非常适合模拟文件系统结构：

// 文件系统组件
class FileSystemComponent {
  constructor(name) {
    this.name = name;
  }
  
  display(indent = '') {
    throw new Error("必须实现display方法");
  }
}

// 文件（叶子节点）
class File extends FileSystemComponent {
  display(indent = '') {
    console.log(`${indent}📄 ${this.name}`);
  }
}

// 文件夹（复合节点）
class Folder extends FileSystemComponent {
  constructor(name) {
    super(name);
    this.children = [];
  }
  
  add(component) {
    this.children.push(component);
  }
  
  display(indent = '') {
    console.log(`${indent}📁 ${this.name}`);
    for (const child of this.children) {
      child.display(indent + '  ');
    }
  }
}

// 使用示例
const root = new Folder('根目录');
const documents = new Folder('文档');
const images = new Folder('图片');

root.add(documents);
root.add(images);

documents.add(new File('简历.pdf'));
documents.add(new File('报告.docx'));

images.add(new File('photo1.jpg'));
images.add(new File('photo2.jpg'));

root.display();

透明式与安全式组合模式

组合模式有两种主要变体：

1. 透明式：所有组件（包括叶子节点）都实现相同的接口

   • 优点：客户端无需区分叶子节点和复合节点
   • 缺点：叶子节点需要实现不必要的方法（可能抛出异常）

2. 安全式：只有复合节点实现管理子组件的方法

   • 优点：避免叶子节点实现不必要的方法
   • 缺点：客户端需要知道节点的具体类型

JavaScript通常采用透明式实现，因为它的动态类型特性可以更灵活地处理这种情况。

组合模式在UI组件中的应用

现代前端框架中的组件系统本质上就是组合模式的体现：

// 模拟UI组件系统
class UIComponent {
  constructor(name) {
    this.name = name;
    this.children = [];
  }
  
  add(component) {
    this.children.push(component);
    return this; // 支持链式调用
  }
  
  render() {
    return `
      <div class="${this.name}">
        ${this.children.map(child => child.render()).join('')}
      </div>
    `;
  }
}

// 使用示例
const app = new UIComponent('app')
  .add(
    new UIComponent('header')
      .add(new UIComponent('logo'))
      .add(new UIComponent('nav'))
  )
  .add(
    new UIComponent('main')
      .add(new UIComponent('sidebar'))
      .add(new UIComponent('content'))
  )
  .add(new UIComponent('footer'));

console.log(app.render());

处理复杂数据结构

组合模式可以简化对复杂树形结构的操作：

// 树形数据处理示例
class TreeNode {
  constructor(value) {
    this.value = value;
    this.children = [];
  }
  
  addChild(node) {
    this.children.push(node);
  }
  
  // 深度优先遍历
  traverseDF(fn) {
    fn(this);
    this.children.forEach(child => child.traverseDF(fn));
  }
  
  // 广度优先遍历
  traverseBF(fn) {
    const queue = [this];
    while (queue.length) {
      const node = queue.shift();
      fn(node);
      queue.push(...node.children);
    }
  }
  
  // 查找特定节点
  find(predicate) {
    let result = null;
    this.traverseDF(node => {
      if (predicate(node)) {
        result = node;
      }
    });
    return result;
  }
}

// 使用示例
const tree = new TreeNode(1);
const node2 = new TreeNode(2);
const node3 = new TreeNode(3);
const node4 = new TreeNode(4);

tree.addChild(node2);
tree.addChild(node3);
node2.addChild(node4);

// 查找值为4的节点
const found = tree.find(node => node.value === 4);
console.log(found); // 输出 TreeNode { value: 4, children: [] }

组合模式的优缺点

优点

1. 简化客户端代码，统一处理简单和复杂元素
2. 更容易添加新类型的组件
3. 提供了遍历复杂结构的统一方式

缺点

1. 设计可能过于一般化，难以限制某些操作
2. 透明式实现可能导致运行时错误（调用叶子节点不支持的方法）
3. 对于差异很大的组件，统一的接口可能变得复杂

与其他模式的关系

组合模式常与其他模式结合使用：

1. 与迭代器模式：用于遍历组合结构
2. 与访问者模式：对组合结构中的所有元素执行操作
3. 与装饰器模式：动态添加职责给组件

性能考虑

在处理大型树形结构时，需要注意：

1. 缓存遍历结果以避免重复计算
2. 考虑使用惰性加载（延迟初始化子节点）
3. 对于频繁更新的结构，考虑使用增量更新策略

// 带缓存的组合节点示例
class CachedComposite extends Component {
  constructor(name) {
    super(name);
    this.children = [];
    this.cacheValid = false;
    this.cachedSize = 0;
  }
  
  add(component) {
    this.children.push(component);
    this.cacheValid = false;
  }
  
  getSize() {
    if (!this.cacheValid) {
      this.cachedSize = this.children.reduce(
        (total, child) => total + child.getSize(), 
        0
      );
      this.cacheValid = true;
    }
    return this.cachedSize;
  }
}

实际案例：表单验证系统

组合模式可以构建灵活的表单验证系统：

// 表单验证组件
class Validator {
  validate() {
    throw new Error("必须实现validate方法");
  }
}

// 简单验证规则（叶子节点）
class RequiredValidator extends Validator {
  constructor(field) {
    super();
    this.field = field;
  }
  
  validate(formData) {
    return formData[this.field] 
      ? { isValid: true } 
      : { isValid: false, message: `${this.field}是必填字段` };
  }
}

// 组合验证规则
class ValidatorComposite extends Validator {
  constructor() {
    super();
    this.validators = [];
  }
  
  add(validator) {
    this.validators.push(validator);
  }
  
  validate(formData) {
    const results = this.validators.map(v => v.validate(formData));
    const errors = results.filter(r => !r.isValid);
    
    return errors.length === 0
      ? { isValid: true }
      : { isValid: false, errors };
  }
}

// 使用示例
const formValidator = new ValidatorComposite();
formValidator.add(new RequiredValidator('username'));
formValidator.add(new RequiredValidator('password'));

const result = formValidator.validate({
  username: 'user123',
  password: ''
});

console.log(result);
// 输出: { isValid: false, errors: [{ isValid: false, message: "password是必填字段" }] }