JavaScript组合模式

组合模式（Composite Pattern）是JavaScript设计模式中的一种结构型模式，它允许你将对象组合成树形结构以表示“部分-整体”的层次结构。组合模式使得用户对单个对象和组合对象的使用具有一致性，常用于处理树形数据结构和递归操作。

概述[编辑 | 编辑源代码]

组合模式的核心思想是通过统一的接口处理叶子节点（不可再分的对象）和组合节点（包含子节点的对象）。这种模式在以下场景中特别有用：

需要表示对象的层次结构（如文件系统、DOM树）。
希望对单个对象和组合对象执行相同的操作（如递归渲染、批量计算）。

组合模式的关键组件包括：

Component：声明通用接口，定义叶子节点和组合节点的共同行为。
Leaf：实现Component接口，表示树中的叶子节点（无子节点）。
Composite：实现Component接口，包含子节点并管理它们的生命周期。

代码示例[编辑 | 编辑源代码]

以下是一个简单的文件系统示例，展示组合模式的基本实现：

  
// 定义Component接口  
class FileSystemComponent {  
  constructor(name) {  
    this.name = name;  
  }  

  // 公共方法（叶子节点和组合节点均需实现）  
  display() {  
    throw new Error("Method 'display()' must be implemented.");  
  }  
}  

// Leaf节点（文件）  
class File extends FileSystemComponent {  
  display() {  
    console.log(`File: ${this.name}`);  
  }  
}  

// Composite节点（文件夹）  
class Directory extends FileSystemComponent {  
  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);  
    }  
  }  

  display() {  
    console.log(`Directory: ${this.name}`);  
    this.children.forEach(child => child.display());  
  }  
}  

// 使用示例  
const root = new Directory("Root");  
const documents = new Directory("Documents");  
const image = new File("Image.jpg");  

root.add(documents);  
documents.add(image);  
root.display();

输出结果：

  
Directory: Root  
Directory: Documents  
File: Image.jpg

解释[编辑 | 编辑源代码]

1. FileSystemComponent 是抽象基类，定义了所有节点的共同接口。 2. File 是叶子节点，仅实现自身的显示逻辑。 3. Directory 是组合节点，可以包含其他文件或文件夹，并通过递归调用子节点的 `display()` 方法实现整体渲染。

实际应用场景[编辑 | 编辑源代码]

组合模式在以下场景中非常实用：

1. DOM操作[编辑 | 编辑源代码]

浏览器中的DOM树是组合模式的典型应用。例如，通过统一接口操作单个元素（如 `

`) 或组合元素（如 `

` 包含 ``）：

  
document.querySelectorAll('*').forEach(node => {  
  console.log(node.tagName); // 递归遍历所有节点  
});

2. UI组件库[编辑 | 编辑源代码]

现代前端框架（如React、Vue）的组件系统也遵循组合模式。例如，一个 `Form` 组件可以包含多个 `Input` 子组件：

  
<Form>  
  <Input type="text" />  
  <Input type="password" />  
</Form>

类图[编辑 | 编辑源代码]

使用Mermaid绘制组合模式的类图：

优缺点[编辑 | 编辑源代码]

组合模式的优缺点
优点	缺点
简化客户端代码，统一处理叶子节点和组合对象	可能违反单一职责原则（节点需同时管理自身和子节点）
支持递归操作，方便扩展新节点类型	过度通用化可能导致接口难以理解

总结[编辑 | 编辑源代码]

组合模式通过树形结构和统一接口，简化了复杂层次数据的操作。它在处理递归逻辑（如文件系统、UI组件）时表现出色，但需注意避免过度设计简单场景。

模板:JavaScript设计模式导航