8种常见的设计模式，前端怎么用。 设计模式很抽象，但是云哥通俗易懂的讲下，一下就懂了，很多时候你写的代码里就用到了只是你不知道。
1. 单例模式 (Singleton Pattern)
说明：确保一个类仅有一个实例，并提供一个访问它的全局访问点
生活比喻：一个公司只能有一个总经理，管理全局事务
前端场景：
-
全局状态管理(Vuex/Pinia store)
-
全局弹窗管理(Message、Loading)
// 全局弹窗管理，就像公司只有一个总经理一样
const createMessage = () => {
let instance = null;
return {
getInstance() {
if (!instance) {
instance = { show: (msg) => console.log(msg) };
}
return instance;
}
};
};
2. 策略模式 (Strategy Pattern)
说明：定义一系列算法，把它们封装起来，并且使它们可以互相替换
生活比喻：出门可以选择不同交通工具：步行、单车、开车，目的相同但方式不同
前端场景：
-
表单验证规则
-
排序方式切换
// 不同的排序策略，就像选择不同的交通工具
const sortStrategies = {
price: (a, b) => a.price - b.price,
name: (a, b) => a.name.localeCompare(b.name)
};
3. 观察者模式 (Observer Pattern
说明：定义对象间的一对多依赖关系，当一个对象状态改变时，所有依赖于它的对象都会得到通知
生活比喻：订阅公众号，有新文章时会通知所有关注者
前端场景：
-
事件总线(EventBus)
-
组件通信
// 就像公众号的订阅和推送
const eventBus = {
subscribers: {},
subscribe(event, fn) { /*...*/ },
publish(event, data) { /*...*/ }
};
4. 工厂模式 (Factory Pattern)
说明：提供一个创建对象的接口，让子类决定实例化哪个类
生活比喻：肯德基的点餐，不需要知道厨房如何制作，只需点餐
前端场景：
-
组件动态创建
-
表单控件生成
// 就像点餐一样，只需说要什么，不需要知道制作过程
const createButton = (type) => ({
primary: { class: 'btn-primary' },
danger: { class: 'btn-danger' }
}[type]);
5. 装饰器模式 (Decorator Pattern)
说明：动态地给对象添加一些额外的职责
生活比喻：手机壳，不改变手机功能，但提供保护等额外功能
前端场景：
-
路由守卫
-
接口请求拦截
// 就像给手机套保护壳，增加新功能但不改变原有功能
const withLog = (fn) => {
return (...args) => {
console.log('调用前');
const result = fn(...args);
console.log('调用后');
return result;
};
};
6. 适配器模式 (Adapter Pattern)
说明：将一个类的接口转换成客户希望的另外一个接口
生活比喻：旅行转换插头，让不同标准的插座能够通用
前端场景：
-
后端数据格式转换
-
第三方库接口适配
// 就像转换插头，将一种格式转换为另一种格式
const apiAdapter = {
format: (data) => ({
name: data.userName,
age: data.userAge
})
};
7. 代理模式 (Proxy Pattern)
说明：为其他对象提供一种代理以控制对这个对象的访问
生活比喻：明星经纪人，不直接接触明星而是通过经纪人沟通
前端场景：
-
图片懒加载
-
接口数据缓存
// 就像经纪人代理明星一样，控制对资源的访问
const createImgProxy = (targetImg) => {
const img = new Image();
img.onload = () => targetImg.src = img.src;
return {
setSrc(src) { img.src = src; }
};
};
8. 命令模式 (Command Pattern)
说明：将一个请求封装成一个对象，使你可以用不同的请求对客户进行参数化
生活比喻：餐厅点菜单，服务员记录顾客需求传递给厨房
前端场景：
-
撤销重做功能
-
任务队列管理
// 就像餐厅的点单系统，将请求封装成命令对象
const actions = {
add: {
execute: (x) => x + 1,
undo: (x) => x - 1
}
};
海云前端 提供一对一简历面试辅导 前端私教课 项目难点笔记 语音咨询 模拟面试