前端常见的设计模式
前端开发中经常用到比如单例模式（全局工具redux）、观察者模式（状态管理 / 事件）、策略模式（表单验证）、代理模式（响应式 / 懒加载）、装饰器模式（高姐组件）、组合模式（UI 嵌套结构）等。
设计模式 | 类别 | 前端中的应用例子 |
|---|---|---|
单例模式 | 创建型 | 全局 HTTP 客户端、Logger、Store |
工厂模式 | 创建型 | 创建不同类型的组件 / 消息 / 模块 |
观察者模式 | 行为型 | 事件系统、状态管理、Pub/Sub、React 响应式 |
策略模式 | 行为型 | 表单验证、支付方式、排序策略 |
代理模式 | 结构型 | Vue 3 响应式、图片懒加载、接口代理 |
装饰器模式 | 结构型 | React 高阶组件（HOC）、功能增强 |
组合模式 | 结构型 | 组件树、菜单、文件目录、嵌套 UI |
适配器模式 | 结构型 | 适配不同接口、数据格式转换 |
模板方法 | 行为型 | 组件生命周期、基类复用逻辑 |
命令模式 | 行为型 | 操作队列、撤销重做、按钮行为封装 |
✅ 1. 单例模式
保证一个类只有一个实例，并提供全局访问点。
🧩 前端场景：
实现：
✅ 方式 1：使用模块化导出单例（推荐，ES Module / CommonJS）在 JS 模块系统中，模块默认就是单例的！ 因为模块在首次加载后会被缓存，再次 import 时拿到的始终是同一个实例。
🧩 例子：一个全局的 Logger（日志工具）// logger.js
class Logger {log(message) {console.log(`[LOG]: ${message}`);}
}// 导出单例实例
const logger = new Logger();
export default logger;使用：
// a.js
import logger from './logger';
logger.log('来自模块 A');// b.js
import logger from './logger';
logger.log('来自模块 B');// 控制台输出：
// [LOG]: 来自模块 A
// [LOG]: 来自模块 B
// 但 logger 是同一个实例！✅ 2. 工厂模式
提供一个创建对象的接口，但由子类决定实例化哪个类，将对象创建和使用分离。
🧩 前端场景：
创建不同类型的组件 / 模块 / 消息提示（比如 SuccessAlert / ErrorAlert）
创建不同类型的 UI 组件（表单、按钮、弹窗）
🧩 例子：创建不同类型的弹窗
function createAlert(type, message) {switch (type) {case 'success':return { type: 'success', message, bgColor: 'green' };case 'error':return { type: 'error', message, bgColor: 'red' };default:return { type: 'info', message, bgColor: 'blue' };}
}const successAlert = createAlert('success', '操作成功');
const errorAlert = createAlert('error', '出错了');✅ 将对象的创建逻辑封装在工厂函数中，调用方无需关心具体实现
✅ 3. 观察者模式
定义对象间的一对多依赖关系，当一个对象状态改变时，所有依赖它的对象都会收到通知并自动更新。
🧩 前端场景：
React 状态提升 / 全局状态管理（如 Redux、MobX、Context）
自定义事件系统、消息总线、Pub/Sub
组件间通信（比如子组件通知父组件，或者多个组件监听同一状态）
🧩 例子：简易的事件订阅 / 发布系统
class EventEmitter {constructor() {this.events = {};}on(event, listener) {if (!this.events[event]) this.events[event] = [];this.events[event].push(listener);}emit(event, ...args) {if (this.events[event]) {this.events[event].forEach(fn => fn(...args));}}
}// 使用
const emitter = new EventEmitter();
emitter.on('message', data => console.log('收到消息:', data));
emitter.emit('message', 'Hello Observer!');✅ 观察者模式是 React 状态驱动、事件机制、全局状态通信的基石
✅ 4. 策略模式
定义一系列算法，把它们一个个封装起来，并使它们可以互相替换。
🧩 前端场景：
表单验证策略（比如邮箱验证、手机号验证、密码强度）
支付方式选择（支付宝、微信、信用卡，每种支付逻辑不同）
排序 / 过滤策略
🧩 例子：表单验证策略
const strategies = {isEmail: (val) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(val),isPhone: (val) => /^1[3-9]\d{9}$/.test(val),
};function validate(type, value) {return strategies[type] ? strategies[type](value) : false;
}console.log(validate('isEmail', 'a@b.com')); // true✅ 将不同的验证逻辑解耦，方便扩展和维护
✅ 5. 代理模式
为其他对象提供一种代理以控制对这个对象的访问。
🧩 前端场景：
Vue 3 的响应式原理（基于 Proxy）
权限控制、接口请求代理、数据劫持、懒加载代理
🧩 例子：图片懒加载代理
function createLazyImage(src) {let img = new Image();img.src = src;return {show: () => {document.body.appendChild(img);}};
}const lazyImg = createLazyImage('https://example.com/image.jpg');
// 滚动到可视区域时再调用 lazyImg.show()✅ 代理可以控制对象的访问方式，实现更灵活的功能增强
✅ 6. 装饰器模式
动态地给对象添加额外的职责，而不改变其结构。
🧩 前端场景：
React 高阶组件（HOC）
给组件添加额外功能（如权限校验、日志、缓存）
函数 / 方法增强
🧩 例子：React 高阶组件（HOC 是装饰器的一种实现）
function withLogging(WrappedComponent) {return function EnhancedComponent(props) {console.log('组件被渲染了', props);return <WrappedComponent {...props} />;};
}// 使用
const Enhanced = withLogging(MyComponent);✅ 装饰器模式让你可以在不修改原组件代码的情况下增强功能
🆕 现代 JS 也支持原生装饰器语法（实验性），常用于类 / 方法增强
✅ 7. 组合模式
将对象组合成树形结构以表示“部分-整体”的层次结构，使得用户对单个对象和组合对象的使用具有一致性。
🧩 前端场景：
组件树、DOM 树
菜单组件（有子菜单）、文件目录树、UI 嵌套组件
🧩 例子：菜单组件递归渲染子菜单
function MenuItem({ item }) {return (<li>{item.label}{item.children && (<ul>{item.children.map((child, idx) => (<MenuItem key={idx} item={child} />))}</ul>)}</li>);
}✅ 组合模式让你可以用一致的方式处理单个对象和组合对象
8.发布订阅模式
对比项 | 观察者模式（Observer） | 发布订阅模式（Pub/Sub） |
|---|---|---|
🧩 关系 | 观察者（Observer）直接订阅 被观察者（Subject），两者有直接联系 | 发布者（Publisher）和订阅者（Subscriber）彼此不直接认识，通过中间人（Event Bus）通信 |
🧩 耦合度 | 相对较高，观察者要知道被观察者 | 更低耦合，发布者和订阅者完全解耦 |
🧩 实现方式 | Subject 维护一个 Observers 列表，直接调用它们的更新方法 | 事件中心维护 topic/事件列表，根据订阅的消息分发 |
✅ 举例 | Vue 2 中 | 自定义事件系统、Redux events、RxJS、Node.js EventEmitter |
✅ 观察者模式是 Pub/Sub 的一种特例或简化形式，Pub/Sub 是更通用、更松耦合的通信模式，因此也被广泛认为是一种重要的设计模式。
应用：
场景 | 说明 | 是否使用设计模式思想 |
|---|---|---|
✅ 浏览器事件机制（addEventListener / dispatchEvent） | 本质是一个发布订阅系统 | ✅ 是 |
✅ Vue 自定义事件（emit/on） | 组件间通信，基于发布订阅思想 | ✅ 是 |
✅ Redux / Vuex 的 action / dispatcher 机制 | 虽然不是典型的 Pub/Sub，但有相似的消息驱动思想 | ✅ 类似 |
✅ Node.js 的 EventEmitter | 经典的发布订阅实现 | ✅ 是 |
✅ RxJS Observables | 响应式编程中的核心，是强大的 Pub/Sub / 数据流工具 | ✅ 是 |
✅ 前端全局事件总线（EventBus） | 自己封装的事件通信机制，用于非父子组件通信 | ✅ 是 |
✅ MQTT / WebSocket 消息推送 | 服务端推送，前端多个模块订阅不同消息 | ✅ 是 |