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

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

组合模式是一种结构型设计模式，允许将对象组合成树形结构以表示"部分-整体"的层次结构。这种模式使得客户端对单个对象和组合对象的使用具有一致性。在JavaScript中，组合模式特别适合处理具有递归特性的UI组件、文件系统等场景。

组合模式的核心概念

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

1. Component：抽象类或接口，定义所有对象的通用接口
2. Leaf：叶子节点，没有子组件
3. Composite：容器节点，可以包含子组件

// 抽象组件类
class Component {
  constructor(name) {
    this.name = name;
  }
  
  // 公共接口
  operation() {
    throw new Error('必须在子类中实现');
  }
  
  // 管理子组件的方法
  add(component) {
    throw new Error('叶子节点不能添加子组件');
  }
  
  remove(component) {
    throw new Error('叶子节点不能移除子组件');
  }
  
  getChild(index) {
    throw new Error('叶子节点没有子组件');
  }
}

叶子节点实现

叶子节点是组合中的基本元素，不包含子组件：

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

复合节点实现

复合节点可以包含子组件，通常实现添加、移除和访问子组件的方法：

class Composite extends Component {
  constructor(name) {
    super(name);
    this.children = [];
  }
  
  operation() {
    console.log(`执行复合节点 ${this.name} 的操作`);
    this.children.forEach(child => child.operation());
  }
  
  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];
  }
}

组合模式的实际应用

文件系统示例

组合模式非常适合表示文件系统结构，其中文件和文件夹可以统一处理：

// 文件(叶子节点)
class File extends Component {
  constructor(name, size) {
    super(name);
    this.size = size;
  }
  
  operation() {
    console.log(`文件: ${this.name}, 大小: ${this.size}KB`);
  }
  
  getSize() {
    return this.size;
  }
}

// 文件夹(复合节点)
class Folder extends Composite {
  constructor(name) {
    super(name);
  }
  
  operation() {
    console.log(`文件夹: ${this.name}`);
    super.operation();
  }
  
  getSize() {
    let totalSize = 0;
    this.children.forEach(child => {
      totalSize += child.getSize();
    });
    return totalSize;
  }
}

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

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

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

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

root.operation();
console.log(`总大小: ${root.getSize()}KB`);

UI组件树示例

前端开发中，组合模式常用于构建UI组件树：

// UI组件基类
class UIComponent {
  constructor(name) {
    this.name = name;
  }
  
  render() {
    throw new Error('必须实现render方法');
  }
  
  add(component) {
    throw new Error('叶子组件不能添加子组件');
  }
  
  remove(component) {
    throw new Error('叶子组件不能移除子组件');
  }
}

// 叶子组件
class Button extends UIComponent {
  render() {
    console.log(`渲染按钮: ${this.name}`);
    return `<button>${this.name}</button>`;
  }
}

class Input extends UIComponent {
  render() {
    console.log(`渲染输入框: ${this.name}`);
    return `<input placeholder="${this.name}">`;
  }
}

// 复合组件
class Form extends UIComponent {
  constructor(name) {
    super(name);
    this.children = [];
  }
  
  render() {
    console.log(`开始渲染表单: ${this.name}`);
    let html = `<form>`;
    this.children.forEach(child => {
      html += child.render();
    });
    html += `</form>`;
    return html;
  }
  
  add(component) {
    this.children.push(component);
  }
  
  remove(component) {
    const index = this.children.indexOf(component);
    if (index !== -1) {
      this.children.splice(index, 1);
    }
  }
}

// 使用示例
const loginForm = new Form('登录表单');
loginForm.add(new Input('用户名'));
loginForm.add(new Input('密码'));
loginForm.add(new Button('登录'));

console.log(loginForm.render());

组合模式的透明性与安全性

组合模式有两种实现方式：透明模式和安全模式。透明模式中，Component定义了所有方法（包括管理子组件的方法），Leaf需要实现这些方法但可能抛出异常。安全模式则将管理子组件的方法只放在Composite中，但客户端需要知道组件的具体类型。

JavaScript通常采用透明模式，因为动态类型语言可以更灵活地处理这种情况：

// 透明模式示例
class TransparentComponent {
  constructor(name) {
    this.name = name;
  }
  
  operation() {
    console.log(`组件 ${this.name} 的操作`);
  }
  
  // 透明模式下，所有组件都有这些方法
  add(component) {
    throw new Error('不支持的操作');
  }
  
  remove(component) {
    throw new Error('不支持的操作');
  }
  
  getChild(index) {
    throw new Error('不支持的操作');
  }
}

// 透明模式的叶子节点
class TransparentLeaf extends TransparentComponent {
  // 不需要重写add/remove/getChild，直接继承抛出异常的实现
}

// 透明模式的复合节点
class TransparentComposite extends TransparentComponent {
  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} 的操作`);
    this.children.forEach(child => child.operation());
  }
}

组合模式的优缺点

优点

1. 可以一致地处理简单和复杂元素
2. 客户端代码可以统一处理单个对象和组合对象
3. 符合开闭原则，容易添加新类型的组件
4. 可以构建复杂的树形结构

缺点

1. 设计可能过于一般化，难以限制组合中的组件
2. 透明模式下，叶子节点需要实现不相关的方法
3. 对于差异很大的组件，公共接口可能难以设计

组合模式与迭代器模式结合

组合模式常与迭代器模式一起使用，以遍历复杂的树形结构：

// 深度优先迭代器
class DepthFirstIterator {
  constructor(component) {
    this.stack = [component];
  }
  
  next() {
    if (this.stack.length === 0) {
      return { done: true };
    }
    
    const current = this.stack.pop();
    
    if (current instanceof Composite) {
      // 逆序压栈以保证从左到右遍历
      for (let i = current.children.length - 1; i >= 0; i--) {
        this.stack.push(current.children[i]);
      }
    }
    
    return { value: current, done: false };
  }
}

// 使用示例
const tree = new Composite('root');
const branch1 = new Composite('branch1');
const branch2 = new Composite('branch2');

branch1.add(new Leaf('leaf1'));
branch1.add(new Leaf('leaf2'));
branch2.add(new Leaf('leaf3'));

tree.add(branch1);
tree.add(branch2);

const iterator = new DepthFirstIterator(tree);
let result = iterator.next();

while (!result.done) {
  console.log(result.value.name);
  result = iterator.next();
}

组合模式在虚拟DOM中的应用

现代前端框架中的虚拟DOM本质上就是组合模式的应用：

// 简化的虚拟DOM实现
class VNode {
  constructor(type, props, children) {
    this.type = type;
    this.props = props || {};
    this.children = children || [];
  }
  
  render() {
    if (typeof this.type === 'string') {
      // 原生DOM元素
      const el = document.createElement(this.type);
      
      // 设置属性
      for (const [key, value] of Object.entries(this.props)) {
        el.setAttribute(key, value);
      }
      
      // 渲染子节点
      this.children.forEach(child => {
        if (typeof child === 'string') {
          el.appendChild(document.createTextNode(child));
        } else {
          el.appendChild(child.render());
        }
      });
      
      return el;
    } else if (typeof this.type === 'function') {
      // 组件
      const instance = new this.type(this.props);
      const childVNode = instance.render();
      return childVNode.render();
    }
  }
}

// 使用示例
class MyComponent {
  constructor(props) {
    this.props = props;
  }
  
  render() {
    return new VNode('div', { class: 'container' }, [
      new VNode('h1', null, ['Hello, ', this.props.name]),
      new VNode('p', null, ['This is a component.'])
    ]);
  }
}

const app = new VNode(MyComponent, { name: 'World' });
document.body.appendChild(app.render());

组合模式与访问者模式结合

组合模式常与访问者模式结合，以对复杂结构执行操作而不修改类：

// 访问者接口
class Visitor {
  visitComponent(component) {
    throw new Error('必须实现visitComponent方法');
  }
  
  visitLeaf(leaf) {
    throw new Error('必须实现visitLeaf方法');
  }
}

// 组件基类扩展
class VisitableComponent {
  constructor(name) {
    this.name = name;
  }
  
  accept(visitor) {
    throw new Error('必须在子类中实现');
  }
}

// 可访问的叶子节点
class VisitableLeaf extends VisitableComponent {
  accept(visitor) {
    visitor.visitLeaf(this);
  }
}

// 可访问的复合节点
class VisitableComposite extends VisitableComponent {
  constructor(name) {
    super(name);
    this.children = [];
  }
  
  accept(visitor) {
    visitor.visitComponent(this);
    this.children.forEach(child => child.accept(visitor));
  }
  
  add(component) {
    this.children.push(component);
  }
}

// 具体访问者：打印名称
class NamePrinter extends Visitor {
  visitComponent(component) {
    console.log(`访问复合组件: ${component.name}`);
  }
  
  visitLeaf(leaf) {
    console.log(`访问叶子组件: ${leaf.name}`);
  }
}

// 使用示例
const root = new VisitableComposite('root');
const branch = new VisitableComposite('branch');
const leaf1 = new VisitableLeaf('leaf1');
const leaf2 = new VisitableLeaf('leaf2');

root.add(branch);
branch.add(leaf1);
branch.add(leaf2);

const visitor = new NamePrinter();
root.accept(visitor);