当前位置：首页 > 文章列表 > 文章 > 前端 > JavaScript单例与观察者模式解析

JavaScript单例与观察者模式解析

2025-11-30 16:44:35 0浏览收藏

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

单例模式确保类仅有一个实例并提供全局访问点，适用于配置管理、日志记录等场景，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方法获取唯一实例。这种方式有效防止了重复创建对象。

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

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

在该模式中，有两个核心角色：主题（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!

这个实现让多个观察者可以动态订阅或取消订阅主题，实现了发布-订阅机制，降低了模块之间的耦合度。