前端常用的设计模式

一、什么是设计模式一套被反复验证、解决某类场景的最佳代码写法。目的代码好维护好扩展少改旧代码结构清晰前端常用的就10 种左右记住这些足够面试工作。二、三大类先记框架创建型怎么 new / 怎么生成对象单例、工厂、原型结构型怎么组合类/对象适配器、装饰器、代理、外观行为型对象之间怎么通信、怎么控制流程观察者、发布订阅、策略、迭代器、状态三、前端必学 10 大设计模式重点1单例模式创建型核心一个类只允许产生一个实例全局唯一弹窗、全局状态管理、全局请求实例Vuex/Pinia、axios 实例、全局消息提示classSingleton{staticinstancenullstaticgetInstance(){if(!this.instance)this.instancenewSingleton()returnthis.instance}}口诀只生一个全局共用2工厂模式创建型核心封装 new 过程统一创建对象批量创建相似节点表单组件创建、不同类型弹窗functioncreateNode(type){if(typediv)returndocument.createElement(div)if(typep)returndocument.createElement(p)}口诀不直接 new交给工厂造3适配器模式结构型核心把不兼容接口转成兼容后端返回数据结构不统一老接口兼容新组件functionadapt(oldData){return{label:oldData.name,value:oldData.id}}口诀接口不兼容加个转换器4装饰器模式结构型核心不修改原函数给它加功能日志、埋点、权限校验、防抖节流ES Decorator、Vue 自定义装饰器functionlog(fn){return(...args){console.log(调用前)constresfn(...args)console.log(调用后)returnres}}口诀不改本体穿件衣服增强5代理模式结构型核心用代理对象控制原对象访问图片懒加载、缓存、权限拦截ES6 Proxy、Vue3 响应式核心constproxynewProxy(obj,{get(target,key){...},set(target,key,val){...}})口诀不让你直接碰我替你访问6外观模式结构型核心封装复杂逻辑对外一个简单接口封装工具库、封装 API 请求functionrequest(url,data){// 内部处理 token、loading、错误、拦截returnaxios(...)}口诀内部一团乱对外一个门7观察者模式行为型核心一对一定时推送目标变化通知观察者组件监听数据变化类似 Vue 的依赖收集口诀我变你知道直接通知你8发布订阅模式行为型⭐ 最常用核心事件中心调度发布 - 订阅 解耦eventBus、mitt、on/off/emit跨组件通信classEventBus{list{}on(name,fn){...}emit(name,data){...}off(name,fn){...}}口诀你发事件我监听互不认识面试必问观察者 vs 发布订阅观察者目标和观察者互相认识发布订阅通过事件中心完全解耦9策略模式行为型核心把多种算法/逻辑做成策略按需切换表单验证、不同支付方式、不同权限conststrategies{vip:(){},normal:(){}}functionuseStrategy(type){returnstrategies[type]()}口诀少写 if-else用策略替换10状态模式行为型核心根据状态不同执行不同行为订单状态待支付/已支付/已取消流程审批、播放器状态口诀状态一变行为自动变四、一张表速记面试直接背模式一句话前端场景单例全局唯一实例Pinia、axios实例工厂统一创建对象批量生成组件适配器数据格式转换接口数据适配装饰器增强不修改原函数埋点、日志代理控制访问Vue3响应式外观封装复杂接口统一request发布订阅事件通信mitt、eventBus策略替换if-else表单验证状态状态切换行为订单/播放器五、最简单总结想全局唯一→ 单例想创建一批对象→ 工厂想加功能不改原代码→ 装饰器想监听通信→ 发布订阅想少写if-else→ 策略模式想控制对象访问→ 代理想兼容老接口→ 适配器