JavaScript中的设计模式:单例、观察者模式等_js编程思想

单例模式确保类仅有一个实例并提供全局访问点,适用于配置管理、日志记录等场景,JavaScript中通过闭包和静态方法实现;观察者模式建立一对多依赖关系,状态变化时自动通知所有观察者,常用于事件系统和组件通信,通过Subject和Observer类实现松耦合。

JavaScript中的设计模式:单例、观察者模式等_js编程思想

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方法获取唯一实例。这种方式有效防止了重复创建对象。

立即学习Java免费学习笔记(深入)”;

观察者模式:实现对象间的松耦合通信

观察者模式定义了一种一对多的依赖关系,当一个对象的状态发生变化时,所有依赖它的对象都会自动收到通知。这种模式常用于事件系统、数据绑定和状态管理等场景。

在该模式中,有两个核心角色:主题(Subject)观察者(Observer)。主题负责维护观察者列表,并在状态变化时通知它们。

JavaScript中的设计模式:单例、观察者模式等_js编程思想

比格设计

比格设计是135编辑器旗下一款一站式、多场景、智能化的在线图片编辑器

JavaScript中的设计模式:单例、观察者模式等_js编程思想124

查看详情 JavaScript中的设计模式:单例、观察者模式等_js编程思想

 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中的设计模式:单例、观察者模式等_

暂无评论

发送评论 编辑评论


				
上一篇
下一篇
text=ZqhQzanResources