常见的设计模式？

先给面试结论设计模式是一些在软件开发中反复出现、被总结出来的通用解决方案。常见设计模式一般分三类创建型模式结构型模式行为型模式如果面试官问“常见的设计模式有哪些”你可以先答这几个高频的单例模式工厂模式观察者模式 / 发布订阅模式代理模式策略模式装饰器模式适配器模式责任链模式模板方法模式前端面试里最常问、最实用的通常是单例、工厂、观察者/发布订阅、代理、策略、装饰器、适配器一、设计模式是什么设计模式不是固定代码而是在某类场景下如何组织代码的一种成熟思想。它解决的问题通常包括代码复用降低耦合提高可扩展性提高可维护性让团队协作更统一二、设计模式三大类1. 创建型模式关注“对象怎么创建”。常见有单例模式工厂模式抽象工厂模式建造者模式原型模式2. 结构型模式关注“对象和类怎么组合”。常见有适配器模式装饰器模式代理模式外观模式桥接模式组合模式享元模式3. 行为型模式关注“对象之间怎么通信、职责怎么分配”。常见有观察者模式发布订阅模式策略模式责任链模式模板方法模式命令模式状态模式迭代器模式中介者模式三、前端最常见的几个设计模式下面讲面试里最常用的。1. 单例模式含义一个类或对象全局只能有一个实例。适用场景全局缓存全局状态管理弹窗管理器事件总线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面试表达单例模式保证一个类只有一个实例并提供全局访问点适合全局唯一对象的场景。2. 工厂模式含义把对象的创建过程封装起来调用方不直接new复杂对象。适用场景根据不同参数创建不同对象UI 组件创建不同类型实例的统一生产示例function createUser(role) { if (role admin) { return { name: 管理员, power: all } } if (role user) { return { name: 普通用户, power: part } } }面试表达工厂模式的核心是封装对象创建过程让调用方不关心实例具体怎么创建只关心拿到结果。3. 观察者模式含义一个对象状态变化时依赖它的对象会收到通知并自动更新。适用场景Vue 响应式原理数据变化驱动视图更新事件监听简单示例class Subject { constructor() { this.observers [] } add(observer) { this.observers.push(observer) } notify(data) { this.observers.forEach(fn fn(data)) } } const sub new Subject() sub.add(data console.log(观察者1:, data)) sub.add(data console.log(观察者2:, data)) sub.notify(更新了)面试表达观察者模式是一对多依赖关系一个对象变化时会通知所有依赖对象。4. 发布订阅模式这个经常和观察者模式一起问。含义通过一个事件中心来解耦发布者和订阅者。和观察者模式区别观察者模式观察者直接订阅目标对象发布订阅模式通过中间事件总线通信双方不知道彼此示例class EventBus { constructor() { this.events {} } on(event, fn) { if (!this.events[event]) this.events[event] [] this.events[event].push(fn) } emit(event, data) { if (this.events[event]) { this.events[event].forEach(fn fn(data)) } } } const bus new EventBus() bus.on(login, data console.log(收到登录事件, data)) bus.emit(login, { user: Tom })面试表达发布订阅模式通过事件中心统一管理订阅和派发进一步解耦了对象之间的关系。5. 代理模式含义通过一个代理对象控制对目标对象的访问。适用场景图片懒加载请求代理权限校验缓存代理ES6Proxy示例缓存代理function sum(a, b) { return a b } function proxySum() { const cache {} return function (...args) { const key args.join(,) if (cache[key]) return cache[key] cache[key] sum(...args) return cache[key] } } const calc proxySum() console.log(calc(1, 2)) console.log(calc(1, 2))面试表达代理模式就是为目标对象提供一个替身通过代理可以增强、限制或控制访问。6. 策略模式含义把一组算法或规则封装起来可以互相替换。适用场景表单校验支付方式选择不同折扣算法不同排序规则示例const strategies { normal(price) { return price }, vip(price) { return price * 0.8 }, superVip(price) { return price * 0.6 } } function calcPrice(type, price) { return strategies[type](price) } console.log(calcPrice(vip, 100))面试表达策略模式把不同算法封装成独立策略使得它们可以自由切换避免大量 if...else。7. 装饰器模式含义在不改变原对象结构的前提下动态增强对象功能。适用场景AOP日志埋点方法增强React 高阶组件思想上也有点类似增强JS 中对函数包装示例function logDecorator(fn) { return function (...args) { console.log(执行前) const res fn.apply(this, args) console.log(执行后) return res } } function sayHi() { console.log(hi) } const newFn logDecorator(sayHi) newFn()面试表达装饰器模式的核心是在不修改原对象的情况下对其功能进行扩展。8. 适配器模式含义把一个接口转换成调用方希望的另一个接口。适用场景兼容老接口第三方库接入数据格式转换示例const oldApi { getUser() { return { username: Tom, age: 20 } } } function adapter() { const data oldApi.getUser() return { name: data.username, age: data.age } } console.log(adapter())面试表达适配器模式用于接口转换让原本不兼容的接口能够协同工作。9. 责任链模式含义把多个处理者串成一条链请求沿着链依次传递直到被某个节点处理。适用场景请假审批流参数校验链中间件机制Promise 链式处理思想上也可类比示例function check1(num) { if (num 10) { console.log(check1 处理) return true } return false } function check2(num) { if (num 20) { console.log(check2 处理) return true } return false } function handle(num) { if (check1(num)) return if (check2(num)) return console.log(没人处理) }面试表达责任链模式将多个处理节点串联起来请求逐级传递从而实现发送者与接收者解耦。10. 模板方法模式含义定义一个算法骨架某些步骤延迟到子类或具体实现中完成。适用场景统一流程不同步骤实现不同封装标准化业务流程示例class Beverage { make() { this.boil() this.brew() this.pour() } boil() { console.log(烧水) } brew() {} pour() { console.log(倒入杯中) } } class Tea extends Beverage { brew() { console.log(泡茶) } }面试表达模板方法模式是先定义流程骨架再把具体步骤交给子类实现。四、前端里有哪些实际应用这个很适合面试加分。1. 单例模式Vuex / Pinia store全局弹窗全局缓存对象2. 工厂模式根据配置生成组件根据类型生成实例createApp、createRouter这类创建过程3. 观察者 / 发布订阅DOM 事件EventBusVue 响应式依赖收集与通知自定义事件系统4. 代理模式ES6Proxy图片预加载请求转发缓存层5. 装饰器模式高阶函数包装埋点、日志、权限增强TypeScript / 装饰器语法场景6. 策略模式表单校验规则支付方式切换不同用户角色对应不同逻辑7. 责任链模式Express / Koa 中间件审批流多级校验五、面试里怎么说“观察者和发布订阅区别”这个是高频点。你可以这样回答观察者模式中观察者和目标对象是直接关联的目标对象状态变化时会直接通知观察者。发布订阅模式中发布者和订阅者不直接通信而是通过事件中心进行转发所以耦合度更低。一句话记观察者是直接订阅目标发布订阅是借助中间平台。六、面试推荐回答模板如果面试官问“常见的设计模式有哪些”你可以这样答常见设计模式可以分为创建型、结构型和行为型三类。前端开发里比较常见的有单例模式保证全局只有一个实例工厂模式封装对象创建过程观察者模式 / 发布订阅模式处理对象间通知机制代理模式通过代理控制对目标对象的访问策略模式封装不同算法便于切换装饰器模式在不改原对象的情况下增强功能适配器模式做接口转换责任链模式让请求沿链路逐级处理在前端实际开发中像 Vue 响应式、事件总线、Koa 中间件、表单校验、全局弹窗这些场景都能看到设计模式的应用。七、30 秒短答版常见设计模式有单例、工厂、观察者、发布订阅、代理、策略、装饰器、适配器、责任链、模板方法等。前端里最常见的是单例、工厂、观察者/发布订阅、代理和策略模式比如 Vue 响应式、事件总线、Koa 中间件、表单校验等都体现了设计模式思想。八、一句话总结设计模式本质上是对常见代码组织问题的成熟解法核心价值是降低耦合、提升复用和扩展性。