单例模式确保一个类仅有一个实例并提供全局访问点，适用于配置管理等场景；工厂模式封装对象创建逻辑，实现创建与使用的解耦；观察者模式建立一对多依赖，状态变化时自动通知所有观察者，广泛用于事件系统和响应式框架；装饰器模式通过高阶函数或语法动态扩展功能，适合日志、权限等横切逻辑；策略模式将算法封装为可互换的策略对象，便于灵活切换行为，如表单验证或多算法选择。JavaScript的灵活性使这些模式实现更简洁高效。
设计模式是软件开发中常见问题的可复用解决方案。在JavaScript中，由于其灵活的语言特性（如函数是一等公民、动态类型、原型继承等），许多经典的设计模式可以以更简洁或不同的方式实现。下面介绍几种常用的设计模式及其在JS中的实现与应用场景。
1. 单例模式（Singleton Pattern）
单例模式确保一个类只有一个实例，并提供一个全局访问点。
在JavaScript中，可以通过闭包或模块模式来实现单例：
const Singleton = (function () {
let instance;
function createInstance() {
return { name: 'I am the only instance' };
}
return {
getInstance: function () {
if (!instance) {
instance = createInstance();
}
return instance;
}
};
})();
// 使用
const obj1 = Singleton.getInstance();
const obj2 = Singleton.getInstance();
console.log(obj1 === obj2); // true
适用于：配置管理、日志记录器、全局状态管理等需要唯一实例的场景。
2. 工厂模式（Factory Pattern）
工厂模式用于创建对象，而无需指定具体的类。它将对象的创建逻辑封装起来。
function AnimalFactory(type) {
if (type === 'dog') {
return {
speak: () => console.log('Woof!')
};
} else if (type === 'cat') {
return {
speak: () => console.log('Meow!')
};
}
}
// 使用
const dog = AnimalFactory('dog');
const cat = AnimalFactory('cat');
dog.speak(); // Woof!
cat.speak(); // Meow!
适用于：需要根据条件创建不同对象类型，且希望解耦创建逻辑与使用逻辑的情况。
3. 观察者模式（Observer Pattern）
观察者模式定义了对象之间的一对多依赖关系，当一个对象状态改变时，所有依赖它的对象都会收到通知。
在前端开发中，这种模式广泛应用于事件系统和响应式数据绑定。
class Subject {
constructor() {
this.observers = [];
}
subscribe(observer) {
this.observers.push(observer);
}
unsubscribe(observer) {
this.observers = this.observers.filter(obs => obs !== 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('Hello Observers!'); // 两个观察者都会收到消息
适用于：事件总线、发布/订阅系统、Vue或React中的响应式更新机制。
4. 装饰器模式（Decorator Pattern）
装饰器模式允许在不修改原有对象的基础上，动态地扩展其功能。
JavaScript中可以通过高阶函数或ESNext的装饰器语法（需编译支持）实现。
function logDecorator(fn) {
return function (...args) {
console.log(`Calling ${fn.name} with`, args);
const result = fn.apply(this, args);
console.log(`Result: ${result}`);
return result;
};
}
function add(a, b) {
return a + b;
}
const loggedAdd = logDecorator(add);
loggedAdd(2, 3);
// 输出：
// Calling add with [2, 3]
// Result: 5
适用于：日志记录、权限校验、性能监控等横切关注点的增强。
5. 策略模式（Strategy Pattern）
策略模式将算法或行为封装成独立的策略对象，使它们可以互换使用。
const strategies = {
'fast': () => console.log('Running fast strategy'),
'slow': () => console.log('Running slow strategy'),
'balanced': () => console.log('Running balanced strategy')
};
function runStrategy(name) {
if (strategies[name]) {
strategies[name]();
} else {
console.log('Unknown strategy');
}
}
// 使用
runStrategy('fast'); // Running fast strategy
runStrategy('balanced'); // Running balanced strategy
适用于：表单验证、动画效果选择、算法切换等需要灵活替换逻辑的场景。
基本上就这些。JavaScript凭借其灵活性，让设计模式的实现更加轻量和直观。理解这些模式的核心思想比死记硬背更重要，合理运用能显著提升代码的可维护性和扩展性。
