JavaScript单例与观察者模式解析
时间:2025-11-30 16:44:35 116浏览 收藏
JavaScript设计模式是提升代码质量的关键。本文深入解析了两种常用且实用的设计模式:单例模式与观察者模式,并结合百度SEO优化。**单例模式**确保类仅有一个实例,并提供全局访问点,适用于配置管理和日志记录等场景,在JavaScript中常通过闭包和静态方法实现。**观察者模式**则建立了一种一对多的依赖关系,当对象状态变化时,自动通知所有观察者,广泛应用于事件系统和组件通信,通过Subject和Observer类实现松耦合。掌握这两种模式,能有效解决JavaScript开发中的常见问题,编写出结构清晰、易于维护和扩展的代码。文章还提供了实际应用场景建议,帮助开发者更好地理解和应用这些模式。
单例模式确保类仅有一个实例并提供全局访问点,适用于配置管理、日志记录等场景,JavaScript中通过闭包和静态方法实现;观察者模式建立一对多依赖关系,状态变化时自动通知所有观察者,常用于事件系统和组件通信,通过Subject和Observer类实现松耦合。

在JavaScript开发中,设计模式是解决常见问题的可复用方案。它们帮助我们写出结构清晰、易于维护和扩展的代码。其中,单例模式和观察者模式是最常用且实用的两种设计模式。下面分别介绍它们的核心思想和实现方式。
单例模式:确保一个类只有一个实例
单例模式的核心是保证某个类在整个应用中只存在一个实例,并提供一个全局访问点。这在需要共享资源或控制对象创建频率时非常有用,比如配置管理、日志记录器或数据库连接池。
在JavaScript中,由于没有类的私有构造函数,我们通过闭包和静态属性模拟单例行为:
const Singleton = (function () {
let instance;
function createInstance() {
return { name: 'Singleton Instance' };
}
return {
getInstance: function () {
if (!instance) {
instance = createInstance();
}
return instance;
}
};
})();
// 使用
const obj1 = Singleton.getInstance();
const obj2 = Singleton.getInstance();
console.log(obj1 === obj2); // true
上面的代码利用立即执行函数(IIFE)创建了一个私有作用域,instance变量无法被外部直接访问,只能通过getInstance方法获取唯一实例。这种方式有效防止了重复创建对象。
观察者模式:实现对象间的松耦合通信
观察者模式定义了一种一对多的依赖关系,当一个对象的状态发生变化时,所有依赖它的对象都会自动收到通知。这种模式常用于事件系统、数据绑定和状态管理等场景。
在该模式中,有两个核心角色:主题(Subject) 和 观察者(Observer)。主题负责维护观察者列表,并在状态变化时通知它们。
class Subject {
constructor() {
this.observers = [];
}
addObserver(observer) {
this.observers.push(observer);
}
removeObserver(observer) {
this.observers = this.observers.filter(obs => obs !== observer);
}
notify(data) {
this.observers.forEach(observer => observer.update(data));
}
}
class Observer {
constructor(name) {
this.name = name;
}
update(data) {
console.log(`${this.name} received:`, data);
}
}
// 使用示例
const subject = new Subject();
const observer1 = new Observer('Observer A');
const observer2 = new Observer('Observer B');
subject.addObserver(observer1);
subject.addObserver(observer2);
subject.notify('State changed!');
// 输出:
// Observer A received: State changed!
// Observer B received: State changed!
这个实现让多个观察者可以动态订阅或取消订阅主题,实现了发布-订阅机制,降低了模块之间的耦合度。
实际应用场景建议
单例模式适合用于:
- 全局配置管理器
- 日志服务
- 缓存实例(如localStorage封装)
观察者模式适用于:
- 自定义事件系统
- 组件间通信(如Vue的$emit/$on)
- 状态管理雏形(类似Redux的监听机制)
合理使用这些模式能提升代码组织性,但也要避免过度设计。例如,简单的项目可能不需要手动实现完整的观察者模式,可以直接使用浏览器原生的EventTarget或现代框架提供的响应式系统。
基本上就这些。掌握这两种模式的本质,有助于理解更复杂的架构设计。今天关于《JavaScript单例与观察者模式解析》的内容介绍就到此结束,如果有什么疑问或者建议,可以在golang学习网公众号下多多回复交流;文中若有不正之处,也希望回复留言以告知!
-
502 收藏
-
501 收藏
-
501 收藏
-
501 收藏
-
501 收藏
-
212 收藏
-
492 收藏
-
474 收藏
-
459 收藏
-
387 收藏
-
337 收藏
-
396 收藏
-
174 收藏
-
383 收藏
-
496 收藏
-
283 收藏
-
471 收藏
-
- 前端进阶之JavaScript设计模式
- 设计模式是开发人员在软件开发过程中面临一般问题时的解决方案,代表了最佳的实践。本课程的主打内容包括JS常见设计模式以及具体应用场景,打造一站式知识长龙服务,适合有JS基础的同学学习。
- 立即学习 543次学习
-
- GO语言核心编程课程
- 本课程采用真实案例,全面具体可落地,从理论到实践,一步一步将GO核心编程技术、编程思想、底层实现融会贯通,使学习者贴近时代脉搏,做IT互联网时代的弄潮儿。
- 立即学习 516次学习
-
- 简单聊聊mysql8与网络通信
- 如有问题加微信:Le-studyg;在课程中,我们将首先介绍MySQL8的新特性,包括性能优化、安全增强、新数据类型等,帮助学生快速熟悉MySQL8的最新功能。接着,我们将深入解析MySQL的网络通信机制,包括协议、连接管理、数据传输等,让
- 立即学习 500次学习
-
- JavaScript正则表达式基础与实战
- 在任何一门编程语言中,正则表达式,都是一项重要的知识,它提供了高效的字符串匹配与捕获机制,可以极大的简化程序设计。
- 立即学习 487次学习
-
- 从零制作响应式网站—Grid布局
- 本系列教程将展示从零制作一个假想的网络科技公司官网,分为导航,轮播,关于我们,成功案例,服务流程,团队介绍,数据部分,公司动态,底部信息等内容区块。网站整体采用CSSGrid布局,支持响应式,有流畅过渡和展现动画。
- 立即学习 485次学习