JavaScript常用设计模式包括单例、观察者、工厂、策略等,其中单例确保全局唯一实例,常通过静态属性或模块导出实现;观察者模式实现一对多依赖通知,发布-订阅则进一步解耦为事件中心通信。

JavaScript 中常用的设计模式有单例模式、观察者模式、工厂模式、策略模式、代理模式、装饰器模式、发布-订阅模式、状态模式、命令模式等。其中单例和观察者(或其变体“发布-订阅”)在实际开发中出现频率高,实现也相对轻量。
单例模式:确保一个类只有一个实例
核心是控制实例的创建时机与访问方式,避免重复初始化。JS 中没有类的严格封装,常用闭包或静态属性 + 条件判断来实现。
常见写法(ES6 Class + 静态实例):
class Logger {
constructor() {
if (Logger.instance) {
return Logger.instance;
}
this.logs = [];
Logger.instance = this;
}
log(msg) {
this.logs.push(`[${Date.now()}] ${msg}`);
}
}
// 使用
const a = new Logger();
const b = new Logger();
console.log(a === b); // true
更稳妥的方式是用私有静态变量(ES2022+)或模块级闭包隐藏实例:
立即学习“Java免费学习笔记(深入)”;
- 模块导出一个已创建的对象,天然单例(推荐,简单可靠)
- 用 Symbol 或 WeakMap 存储私有实例,防止外部篡改构造函数
- 注意:new 操作符配合 return 对象会跳过原型链,需手动绑定或改用工厂函数
观察者模式:对象间一对多依赖,被观察者变化时通知所有观察者
典型结构包含 Subject(目标)和 Observer(观察者)。JS 中常简化为:Subject 管理回调队列,提供 subscribe / unsubscribe / notify 方法。
class Subject {
constructor() {
this.observers = [];
}
subscribe(observer) {
if (typeof observer === 'function') {
this.observers.push(observer);
}
}
unsubscribe(observer) {
this.observers = this.observers.filter(fn => fn !== observer);
}
notify(data) {
this.observers.forEach(observer => observer(data));
}
}
// 使用
const subject = new Subject();
subject.subscribe(msg => console.log('A:', msg));
subject.subscribe(msg => console.log('B:', msg));
subject.notify('Hello'); // A: Hello, B: Hello
实际项目中,更常见的是“发布-订阅”(Pub/Sub)——解耦更彻底,通过事件中心通信,不直接持有观察者引用:
- 用对象存储事件名 → 回调数组映射(如 { click: [fn1, fn2], load: [fn3] })
- 支持通配符、once、优先级等可扩展能力(如 EventEmitter)
- Vue 的 $on/$emit、Node.js 的 EventEmitter 都是该思想的体现
什么时候选哪种?
单例适合全局唯一状态管理(如配置中心、日志器、缓存实例);观察者适合松耦合通信(如 UI 更新、跨组件通知);发布-订阅更适合大型系统中模块间解耦。
基本上就这些。不复杂但容易忽略细节,比如单例的构造拦截是否健壮、观察者是否及时取消订阅防内存泄漏。











