编辑“︁JavaScript组合模式”︁

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

== 概述 ==  
组合模式的核心思想是通过统一的接口处理'''叶子节点'''（不可再分的对象）和'''组合节点'''（包含子节点的对象）。这种模式在以下场景中特别有用：  
* 需要表示对象的层次结构（如文件系统、DOM树）。  
* 希望对单个对象和组合对象执行相同的操作（如递归渲染、批量计算）。  

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

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

<syntaxhighlight lang="javascript">  
// 定义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();  
</syntaxhighlight>  

'''输出结果：'''  
<pre>  
Directory: Root  
Directory: Documents  
File: Image.jpg  
</pre>  

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

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

=== 1. DOM操作 ===  
浏览器中的DOM树是组合模式的典型应用。例如，通过统一接口操作单个元素（如 `<div>`) 或组合元素（如 `<div>` 包含 `<span>`）：  
<syntaxhighlight lang="javascript">  
document.querySelectorAll('*').forEach(node => {  
  console.log(node.tagName); // 递归遍历所有节点  
});  
</syntaxhighlight>  

=== 2. UI组件库 ===  
现代前端框架（如React、Vue）的组件系统也遵循组合模式。例如，一个 `Form` 组件可以包含多个 `Input` 子组件：  
<syntaxhighlight lang="javascript">  
<Form>  
  <Input type="text" />  
  <Input type="password" />  
</Form>  
</syntaxhighlight>  

== 类图 ==  
使用Mermaid绘制组合模式的类图：  
<mermaid>  
classDiagram  
  class Component {  
    <<interface>>  
    +operation()  
  }  
  class Leaf {  
    +operation()  
  }  
  class Composite {  
    -children: Component[]  
    +add(Component)  
    +remove(Component)  
    +operation()  
  }  
  Component <|-- Leaf  
  Component <|-- Composite  
  Composite o-- Component  
</mermaid>  

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

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

{{JavaScript设计模式导航}}

[[Category:编程语言]]
[[Category:JavaScript]]
[[Category:Javascript设计模式]]