单例模式确保类仅有一个实例，如全局状态管理；观察者模式实现对象间一对多通信，用于事件系统；工厂模式通过统一接口创建对象，提升扩展性；装饰器模式动态添加功能而不修改原对象，支持AOP。这些模式共同提升代码的可维护性、解耦性和复用性，是构建健壮JavaScript应用的核心实践。
设计模式是解决常见问题的可复用方案，在高级JavaScript开发中，合理使用设计模式能显著提升代码的可维护性、可扩展性和协作效率。以下是一些在实际项目中广泛应用的设计模式及其具体应用场景。
1. 单例模式（Singleton Pattern）
单例模式确保一个类只有一个实例，并提供全局访问点。适用于管理共享资源，如配置中心、日志记录器或全局状态管理实例。
在前端开发中，Vuex或Redux的store通常就是单例。手动实现时可通过闭包和静态属性控制实例化：
class Logger {
constructor() {
if (Logger.instance) {
return Logger.instance;
}
this.logs = [];
Logger.instance = this;
}
log(message) {
this.logs.push(message);
console.log(`[LOG] ${message}`);
}
}
const logger1 = new Logger();
const logger2 = new Logger();
console.log(logger1 === logger2); // true
这种模式避免重复创建消耗资源的对象，但需注意测试时难以替换依赖。
立即学习“Java免费学习笔记（深入）”；
2. 观察者模式（Observer Pattern）
观察者模式定义对象间的一对多依赖关系，当一个对象状态改变时，所有依赖它的对象都会自动收到通知。常用于事件系统、数据绑定和响应式更新。
Vue.js 的响应式系统底层就基于此模式。简易实现如下：
class Subject {
constructor() {
this.observers = [];
}
subscribe(observer) {
this.observers.push(observer);
}
notify(data) {
this.observers.forEach(observer => observer.update(data));
}
}
class Observer {
update(data) {
console.log("Received:", data);
}
}
const subject = new Subject();
const obs1 = new Observer();
const obs2 = new Observer();
subject.subscribe(obs1);
subject.subscribe(obs2);
subject.notify("State changed!"); // 两个观察者都会收到消息
该模式解耦了发布者与订阅者，适合构建松耦合的组件通信机制。
3. 工厂模式（Factory Pattern）
工厂模式用于创建对象而无需指定具体类，通过统一接口生成不同类型的实例。适用于需要根据条件动态创建对象的场景，比如表单控件渲染或API响应处理器。
例如，根据不同用户角色返回对应的服务实例：
class AdminService {
performAction() { return "Admin action executed"; }
}
class UserService {
performAction() { return "User action executed"; }
}
function ServiceFactory(role) {
switch(role) {
case 'admin':
return new AdminService();
case 'user':
return new UserService();
default:
throw new Error("Invalid role");
}
}
const service = ServiceFactory('admin');
console.log(service.performAction());
工厂模式将对象创建逻辑集中管理，便于后期扩展新类型而不修改调用代码。
4. 装饰器模式（Decorator Pattern）
装饰器模式允许在不修改原对象的前提下动态添加功能。ES2022已支持装饰器语法，可用于类、方法或属性增强。
常见用途包括日志埋点、权限校验、缓存等：
function log(target, name, descriptor) {
const original = descriptor.value;
descriptor.value = function(...args) {
console.log(`Calling "${name}" with`, args);
return original.apply(this, args);
};
return descriptor;
}
class Calculator {
@log
add(a, b) {
return a + b;
}
}
const calc = new Calculator();
calc.add(2, 3); // 输出调用信息后再执行
该模式符合开放封闭原则——对扩展开放，对修改封闭，非常适合中间件和AOP编程。
基本上就这些。掌握这些设计模式并结合实际业务灵活运用，能让JavaScript代码更健壮、更易维护。关键不是死记硬背模式名称，而是理解其背后的思想：解耦、复用、可扩展。
