大家好，我是第八哥。在前端开发的成长过程中，很多同学会遇到这样的问题：代码越来越乱、逻辑耦合严重、维护困难。其实，这些问题的根源往往在于“缺乏设计模式思维”。
今天，我想用最通俗的方式带你认识 JavaScript 设计模式 的核心思想，并通过常见的几种模式实战讲解，帮你从“写得能跑”，到“写得优雅”。
什么是设计模式？
简单来说，设计模式是前辈程序员总结出的“解决特定问题的可复用思路”。它不是框架，也不是代码模板，而是一种让代码更有结构、更易扩展的开发哲学。
在 JS 的世界里，我们常用的模式有：单例模式、工厂模式、观察者模式、策略模式、装饰器模式等。下面我会结合实例，一个个拆解。
一、单例模式（Singleton Pattern）
应用场景： 比如全局配置管理、登录状态、缓存池等，只需要一个实例存在。
class Config {
constructor() {
if (Config.instance) return Config.instance;
this.apiUrl = 'https://api.example.com';
Config.instance = this;
}
}
const c1 = new Config();
const c2 = new Config();
console.log(c1 === c2); // true优点： 节省资源、确保全局唯一性。
缺点： 扩展性差，容易隐藏依赖。
二、工厂模式（Factory Pattern）
应用场景： 当你需要创建不同类型对象，但不想暴露具体创建逻辑时。
class User {
constructor(role) {
this.role = role;
}
}
class UserFactory {
static create(role) {
switch (role) {
case 'admin': return new User('管理员');
case 'guest': return new User('游客');
default: return new User('普通用户');
}
}
}
const u1 = UserFactory.create('admin');
console.log(u1.role); // 管理员优点： 解耦对象创建与使用，便于扩展。
缺点： 增加系统复杂度。
三、观察者模式（Observer Pattern）
应用场景： 典型如事件监听、Vue 的响应式系统、消息订阅机制。
class EventEmitter {
constructor() {
this.events = {};
}
on(event, fn) {
(this.events[event] || (this.events[event] = [])).push(fn);
}
emit(event, data) {
(this.events[event] || []).forEach(fn => fn(data));
}
}
const bus = new EventEmitter();
bus.on('login', user => console.log('用户登录：', user));
bus.emit('login', { name: 'Tom' });优点： 实现组件间解耦。
缺点： 调试困难，事件链复杂时不易追踪。
四、策略模式（Strategy Pattern）
应用场景： 适用于多个算法可互换的场景，比如支付方式选择、表单校验策略。
const strategies = {
alipay: amount => console.log('支付宝支付', amount),
wechat: amount => console.log('微信支付', amount),
credit: amount => console.log('信用卡支付', amount)
};
function pay(type, amount) {
return strategies[type]?.(amount) || console.log('未知支付方式');
}
pay('wechat', 100);优点： 逻辑清晰，易扩展新策略。
缺点： 需提前定义所有策略。
五、装饰器模式（Decorator Pattern）
应用场景： 在不修改原有功能的前提下，动态为对象添加新功能。
function log(target, name, descriptor) {
const fn = descriptor.value;
descriptor.value = function (...args) {
console.log(`调用 ${name} 参数:`, args);
return fn.apply(this, args);
};
}
class MathTool {
@log
add(a, b) {
return a + b;
}
}
const tool = new MathTool();
console.log(tool.add(2, 3));优点： 灵活增强功能，符合开放封闭原则。
缺点： 语法略复杂（需 Babel 支持）。
实战：综合应用案例
假设我们要构建一个电商前端系统：
• 使用单例模式 管理全局购物车。
• 使用观察者模式 实现购物车更新通知。
• 使用策略模式 控制优惠计算。
• 使用工厂模式 创建不同商品实例。
通过这些模式组合，系统的结构会更加清晰，维护也变得更轻松。
总结
设计模式不是死记硬背，而是理解“为什么这样设计”。在前端开发中，合理使用模式能让代码更具扩展性、更易维护。
如果你是初学者，建议先掌握“单例、观察者、策略”三大模式，它们在日常业务中最常见，也是入门的最好起点。
记住：模式不是目的，写出优雅、可维护的代码才是最终目标。
评论