本文详解 JavaScript 中的组合模式，阐述其作为结构型设计模式如何统一处理单个对象与组合对象。通过 Component 接口、Leaf 叶子节点和 Composite 树枝节点的定义，结合目录树、组织架构等实际场景，展示如何利用递归结构简化客户端代码，实现一致化的操作接口。
本文详细解析 JavaScript 设计模式中的组合模式，涵盖其核心原理与实际应用场景，旨在为开发者提供清晰的参考与指导。
组合模式概述
组合模式旨在简化并统一对单个组件（叶子节点）和复合组件（树枝节点）的操作。从结构上看，它本质上表现为一棵树形结构。
该树形结构包含且仅包含一个根节点，作为访问入口。若非空树，则由一个或多个树枝节点及子叶节点构成；每个树枝节点内部又可包含其子树枝节点与子叶节点，形成层级关系。
在面向对象编程实践中，叶子节点与复杂对象（即树枝节点）均需继承自同一个接口或抽象类，并分别实现各自的行为。
该抽象定义通常包含三个核心部分：组件的基本信息、Add（添加）方法以及 Remove（移除）方法。
对于叶子节点，其仅包含自身数据，Add 和 Remove 方法通常实现为空操作（No-Op），因为叶子节点不再包含子节点。
树枝节点在实现组件时，通常包含一个数组用于存储子叶节点或子树枝节点，并提供获取所有子节点的方法（如 GetList）。
典型应用场景：
1. 自然界中的树木结构：树木生长于大地，树根作为入口点，树冠向上生长，既包含叶子也包含子树枝；某些树枝又进一步衍生出叶子和子树枝。
2. 复杂层级系统：如操作系统目录结构、公司部门组织架构、国家省市县行政区划，乃至宇宙万物的包含关系，均涉及单独元物质及物物包含的现象。此类复杂现象均可通过组合模式（部分-整体模式）进行统一处理。
树形结构示意图：
组合模式结构图：
实例源码实现
1. Component 组件基类：
function Component() {
this.name = '';
}
Component.prototype = {
Add: function(comp) {
//rewrite
},
Remove: function(name) {
//rewrite
},
set: function(name) {
this.name = name;
},
operate: function() {
//...
}
}
var comp = new Component();
2. Leaf 叶子节点实现：
function Leaf() {
}
Leaf.prototype = Object.create(comp, {});
Leaf.prototype.get = function() {
return this.name;
}
3. 树枝节点（Composite）实现：
function Composite() {
this.list = [];
}
Composite.prototype = Object.create(comp, {});
Composite.prototype = {
Add: function(comp) {
this.list.push(comp);
},
Remove: function(name) {
for (i in this.list) {
var cmp = this.list[i];
if (cmp.name == name) {
delete this.list[i];
break;
}
}
},
operate: function() {
//do...
},
getList: function(name) {
var cmp;
for (i in this.list) {
cmp = this.list[i];
if (cmp.name == name) {
break;
}
}
return cmp;
}
}
叶子节点可直接复用 Component 的结构，或直接基于 Component 创建；而 Composite 树枝节点则必须重写 Add、Remove、operate 等方法，以支持子节点的聚合与管理。
使用方法：
var root = new Composite();
root.set("root");
//叶子
var leaf = new Leaf();
leaf.set('顶级叶子');
root.Add(leaf);
//树枝节点;
var child = new Composite();
child.set('child');
var childschild = new Composite();
childschild.set('cchild');
child.Add(childschild);
root.Add(child);
root.operate();
其他说明
组合模式属于结构型设计模式，主要用于一致化处理简单元素与复杂元素的操作，使客户端代码与复合结构的复杂性解耦。客户端在搜索、递归至所需节点或位置时，无论面对的是叶子节点还是树枝节点，均可使用统一的方法进行一致操作。在 JavaScript 这类面向对象动态语言中，无需知晓具体元素结构，即可进行查询、添加和删除操作。
感兴趣的朋友可以使用在线 HTML/CSS/JavaScript 代码运行工具：http://tools.jb51.net/code/HtmlJsRun 测试上述代码运行效果。
更多关于 JavaScript 相关内容感兴趣的读者可查看本站专题：《javascript 面向对象入门教程》、《JavaScript 错误与调试技巧总结》、《JavaScript 数据结构与算法技巧总结》、《JavaScript 遍历算法与技巧总结》及《JavaScript 数学运算用法总结》
希望本文所述对大家 JavaScript 程序设计有所帮助。