组合模式通过统一接口处理树形结构中的节点，适用于菜单、文件系统等场景。示例中使用MenuItem类实现添加、删除、遍历操作，并扩展查找与路径功能，简化了客户端对复杂层级的递归处理。
在前端开发中，处理树形结构数据非常常见，比如文件系统、组织架构、菜单层级等。JavaScript 中的组合模式（Composite Pattern）非常适合用来统一操作树形结构中的节点，无论它是叶子节点还是容器节点。
什么是组合模式？
组合模式是一种结构型设计模式，它允许你将对象组合成树形结构来表示“部分-整体”的层次关系。通过该模式，客户端可以统一地对待单个对象和组合对象。
在树形结构中：
- 叶子节点：没有子节点，代表最终的操作目标。
- 容器节点：包含子节点，可以是叶子也可以是其他容器。
组合模式的关键是让它们对外暴露相同的接口，比如 render()、traverse() 或 remove()，这样调用方无需关心当前操作的是哪种节点。
立即学习“Java免费学习笔记（深入）”；
实现一个简单的树形菜单结构
我们以一个菜单系统为例，使用组合模式构建可递归操作的树结构。
class MenuItem {
constructor(name) {
this.name = name;
this.children = [];
}
// 添加子节点
add(child) {
this.children.push(child);
return this;
}
// 移除子节点
remove(child) {
const index = this.children.indexOf(child);
if (index !== -1) {
this.children.splice(index, 1);
}
}
// 遍历并执行操作
traverse(callback) {
callback(this);
this.children.forEach(child => child.traverse(callback));
}
// 获取结构信息
toString() {
return this.name;
}
}
使用示例：
优六系统_企业网站和微论坛源码5.4.0
下载
优六系统(全称:优六企服系统)是在Util6MIS基础上组合CMS等插件及子系统的综合信息化管理系统。 Util6MIS(软著全称:优六信息化管理框架系统)是一款免费的通用信息化快速开发框架，该框架可快速集成各类系统开发。 系统后台采用.NET6 + Layui作为UI支撑，操作界面简洁，项目结构清晰，功能模块化设计，支撑框架轻量高效，代码层级分离，注释完整，可快速重构，提高开发效率。
// 创建根菜单
const menu = new MenuItem("主菜单");
// 创建子菜单
const fileMenu = new MenuItem("文件");
const editMenu = new MenuItem("编辑");
// 添加子项
fileMenu.add(new MenuItem("新建"))
.add(new MenuItem("打开"))
.add(new MenuItem("保存"));
editMenu.add(new MenuItem("剪切"))
.add(new MenuItem("复制"))
.add(new MenuItem("粘贴"));
// 组合到主菜单
menu.add(fileMenu).add(editMenu);
// 遍历打印所有菜单项
menu.traverse(item => {
console.log(item.toString());
});
输出结果会逐层打印出所有菜单项名称，体现了树形结构的深度优先遍历。
扩展功能：查找与路径支持
在实际应用中，可能需要根据名称查找节点或获取其完整路径。我们可以增强 traverse 方法传递上下文。
MenuItem.prototype.findByName = function(name) {
let result = null;
this.traverse(node => {
if (node.name === name) {
result = node;
}
});
return result;
};
// 支持路径追踪（需在 traverse 时传入路径）
MenuItem.prototype.getPath = function(targetName) {
const path = [];
const dfs = (node, currentPath) => {
const newPath = [...currentPath, node.name];
if (node.name === targetName) {
path.push(...newPath);
return true;
}
for (let child of node.children) {
if (dfs(child, newPath)) return true;
}
return false;
};
dfs(this, []);
return path.length ? path.join(' → ') : 'Not found';
};
调用方式：
console.log(menu.getPath("保存"));
// 输出：主菜单 → 文件 → 保存
应用场景与优势
组合模式特别适合以下场景：
- UI 组件树（如 React 虚拟 DOM 的设计理念）
- 文件目录浏览
- 权限管理系统中的资源树
- 表单嵌套校验规则
它的主要优势在于：
- 简化客户端代码，统一接口调用
- 易于扩展新类型的节点
- 天然支持递归操作，逻辑清晰
基本上就这些。只要定义好通用行为，树形结构的操作就能变得简洁而强大。
