单例模式确保类仅有一个实例，通过闭包实现；观察者模式实现对象间松耦合通信，适用于事件系统；工厂模式封装对象创建，提升扩展性；装饰器模式动态扩展功能，利于调试与增强。合理选用可提升代码质量，避免过度设计。
JavaScript设计模式是提升代码可维护性与复用性的关键工具，尤其在复杂应用开发中尤为重要。掌握常用的设计模式能帮助开发者写出更清晰、更灵活的结构，有效应对需求变化。
单例模式：确保一个类只有一个实例
单例模式保证某个类在整个应用中仅被实例化一次，常用于配置管理、日志记录或全局状态控制。
实现方式通常通过闭包或模块模式来隐藏实例创建逻辑：
const Singleton = (function () {
let instance;
function createInstance() {
return { name: 'Singleton Instance' };
}
return {
getInstance: function () {
if (!instance) {
instance = createInstance();
}
return instance;
}
};
})();
// 使用
const inst1 = Singleton.getInstance();
const inst2 = Singleton.getInstance();
console.log(inst1 === inst2); // true
这种写法避免了重复创建对象，节省资源并保持状态统一。
立即学习“Java免费学习笔记（深入）”；
观察者模式：实现对象间的松耦合通信
观察者模式适用于事件驱动场景，比如用户交互、数据更新通知等。主体（Subject）维护一组观察者（Observer），当状态变化时自动通知所有订阅者。
示例实现：
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!'); // 两个观察者都会收到消息
这种模式广泛应用于前端框架中的事件系统和状态管理。
前端设计优化skill
下载
前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。
工厂模式：封装对象创建过程
工厂模式用于根据输入参数返回不同类型的对象，避免在代码中直接使用 new 操作符，提高扩展性。
例如创建不同类型的用户：
function UserFactory(type, name) {
if (type === 'admin') {
return {
name,
role: 'admin',
canEdit: true
};
} else if (type === 'guest') {
return {
name,
role: 'guest',
canEdit: false
};
}
}
// 使用
const admin = UserFactory('admin', 'Alice');
const guest = UserFactory('guest', 'Bob');
当需要新增用户类型时，只需修改工厂函数，而不影响调用方代码。
装饰器模式：动态扩展功能
装饰器模式允许在不修改原对象的前提下为其添加新功能，适合逐步增强对象能力的场景。
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); // 输出调用信息和结果
这种模式在调试、权限校验、缓存等场景非常实用。
基本上就这些。实际开发中结合业务选择合适模式，避免过度设计。理解本质比死记硬背更重要。不复杂但容易忽略。
