📚 目录
- 📦 什么是组合模式？
- 🌲 基础版：用组合模式构建一个简单的树形结构
- 💡 举个更真实的场景：菜单组件
- 🧠 为什么组合模式在前端特别重要？
- 🔨 实战案例：组件嵌套组合 + 权限控制
- 🧩 组合模式的延伸用法：搭建 UI DSL 引擎
- 🧪 面试题时间（欢迎评论区作答）
【初级】前端开发工程师面试100题（一）
【初级】前端开发工程师面试100题（二）
【初级】前端开发工程师的面试100题（速记版）
组合模式，听起来像是某种后端设计范式，但其实前端人用得比谁都多，只不过很多人一直在用，一直没意识到这就是“组合模式”。尤其在搞 React 的时候，组件嵌套那一套说白了就是组合模式的现代写法。
今天我们就从最经典的树形结构聊起，一步一步拆开，讲到前端中真实可落地的使用场景，代码直接跑得起来，结构清晰，逻辑在线，不玩虚的。
本文由全栈老李原创首发，转载请注明出处。
📦 什么是组合模式？
组合模式（Composite Pattern）属于经典的结构型设计模式，它的精髓就是把单个对象和对象集合统一处理。
举个特别通俗的例子：你可以把“一个文件”和“一个文件夹”都当成“文件系统节点”，因为它们有相似的操作，比如“打开”“删除”“重命名”。文件夹里可以有文件、也可以有文件夹。这种树状结构，组合模式就很合适。
在 JavaScript 里，这种结构特别适合用来做：
- 页面组件的递归渲染（React 中尤为常见）
- 组织层级菜单
- 组织评论嵌套结构
- 搭建虚拟 DOM 结构
- 构建语法树（AST）
- 游戏中的对象管理树（比如精灵图）
🌲 基础版：用组合模式构建一个简单的树形结构
先看一个纯粹的组合模式实现，不带任何框架，就是 JS 面向对象本体。
// 全栈老李出品，面试高频组合模式示例// 抽象组件（父类）
class Component {constructor(name) {this.name = name;}add(component) {throw new Error('子类需要实现 add 方法');}remove(component) {throw new Error('子类需要实现 remove 方法');}display(depth = 0