给你整理一份前端面试高频「设计模式」题库（含通俗解析 + 场景 + 代码思路） ，这套基本能覆盖 80% 面试 👇
一、基础认知类（必问）
1. 什么是设计模式？有什么用？
答：
设计模式是对常见问题的可复用解决方案。
👉 本质：
- 提高代码可维护性
- 提高扩展性（开闭原则）
- 降低耦合
👉 前端理解：
就是“别人踩坑总结出来的最佳写法”
2. 设计模式的六大原则（了解2-3个即可）
常考👇
- 单一职责原则（SRP）
- 开闭原则（OCP）
- 里氏替换原则
- 依赖倒置原则
- 接口隔离原则
- 迪米特法则（最少知道原则）
👉 面试常问：
👉 “你项目中怎么体现开闭原则？”
二、创建型模式（重点）
3. 单例模式（必考🔥）
❓ 什么是单例？
一个类只能有一个实例
💡 前端场景
- Vuex / Pinia store
- 全局弹窗
- 全局缓存
💻 实现
class Singleton {
constructor() {
if (Singleton.instance) return Singleton.instance
Singleton.instance = this
}
}
const a = new Singleton()
const b = new Singleton()
console.log(a === b) // true
👉 面试加分点：
- 闭包实现
- 懒加载
4. 工厂模式（高频🔥）
❓ 作用
隐藏创建逻辑，统一入口
💡 场景
- 创建不同组件
- 创建不同请求实例
💻 示例
function createUser(role) {
switch(role) {
case 'admin':
return { name: 'admin', power: 'all' }
case 'guest':
return { name: 'guest', power: 'read' }
}
}
👉 面试延伸：
- 简单工厂 vs 工厂方法 vs 抽象工厂
5. 构造函数模式
function Person(name) {
this.name = name
}
const p = new Person('张三')
👉 本质：
JS 面向对象基础
三、结构型模式（重点）
6. 代理模式（超级高频🔥）
👉 你刚问过 qiankun，这个必问
❓ 作用
控制访问 / 增强功能
💡 前端场景
- Proxy 响应式（Vue3）
- 图片懒加载
- 请求缓存
- qiankun 沙箱
💻 示例
const proxy = new Proxy(target, {
get(target, key) {
console.log('访问了', key)
return target[key]
}
})
👉 面试深挖：
- 虚拟代理（懒加载）
- 缓存代理
7. 装饰器模式（高频🔥）
❓ 作用
动态扩展功能，不改原代码
💡 场景
- React HOC
- Vue 指令
- AOP（埋点/日志）
💻 示例
function log(fn) {
return function(...args) {
console.log('before')
const res = fn(...args)
console.log('after')
return res
}
}
8. 适配器模式
❓ 作用
接口转换（兼容旧代码）
💡 场景
- 后端字段不一致
- 第三方库适配
function adapter(data) {
return {
name: data.username
}
}
9. 外观模式（Facade）
❓ 作用
对复杂系统提供统一入口
💡 场景
function initApp() {
initRouter()
initStore()
initUI()
}
👉 面试话术：
对复杂模块做一层封装
四、行为型模式（重点🔥🔥🔥）
10. 发布-订阅模式（必考🔥🔥🔥）
❓ 作用
解耦通信
💡 场景
- EventBus
- Vue / React 事件机制
💻 示例
class EventEmitter {
constructor() {
this.events = {}
}
on(event, fn) {
(this.events[event] ||= []).push(fn)
}
emit(event, data) {
this.events[event]?.forEach(fn => fn(data))
}
}
11. 观察者模式（高频🔥）
👉 很容易和发布订阅混
❓ 区别
| 模式 | 特点 |
|---|---|
| 观察者 | 直接依赖 |
| 发布订阅 | 通过中介 |
👉 前端：
- Vue 响应式（观察者）
12. 策略模式（高频🔥）
❓ 作用
替换 if-else
💡 场景
- 表单校验
- 支付方式
- 权限判断
💻 示例
const strategies = {
A: () => console.log('A策略'),
B: () => console.log('B策略')
}
function run(type) {
strategies[type]()
}
13. 责任链模式（进阶🔥）
❓ 作用
请求按顺序处理
💡 场景
- 权限校验
- 中间件（Koa / Express）
function middleware(ctx, next) {
console.log(1)
next()
console.log(2)
}
14. 命令模式（了解）
❓ 作用
将请求封装成对象
💡 场景
- undo / redo
- 操作队列
五、结合前端框架的面试题（高频🔥）
15. Vue 用到了哪些设计模式？
👉 标准答案：
- 单例模式 → Vuex
- 观察者模式 → 响应式
- 发布订阅 → 事件机制
- 代理模式 → Proxy
- 工厂模式 → createApp
- 装饰器 → 指令
16. React 中的设计模式？
- 高阶组件（HOC） → 装饰器模式
- Hooks → 组合模式思想
- Context → 发布订阅
17. qiankun 用到了什么设计模式？
👉 你可以这样答（加分🔥）：
- Proxy → 代理模式（沙箱隔离）
- 生命周期 → 发布订阅
- 子应用加载 → 工厂模式
- 全局状态 → 单例模式
六、面试“陷阱题”（高频）
18. 发布订阅 vs 观察者模式区别（必问🔥）
一句话：
👉 观察者：直接依赖
👉 发布订阅：通过中介（EventBus）
19. 为什么要用策略模式而不是 if-else？
👉 标准答：
- 避免大量 if-else
- 提高扩展性（新增策略不用改原代码）
20. 设计模式会不会让代码复杂？
👉 高级回答：
小项目会增加复杂度，大项目是必须的（降低维护成本）
七、面试高分总结话术（直接背🔥）
👉 可以这样总结：
前端设计模式核心是三件事：
- 解耦（发布订阅、观察者）
- 扩展性（策略、工厂）
- 控制访问（代理、单例）
如果你想更狠一点（进阶）
我可以帮你再做一版👇
✅ 「设计模式 + 手写代码题（面试现场写）」
✅ 「设计模式 + 实际项目案例（简历可写）」
✅ 「设计模式 + Vue3/qiankun源码对应解析（高阶）」
直接说一句：要进阶版 👌
