javascript如何实现设计模式_单例模式和观察者模式如何写

单例模式确保类唯一实例并提供全局访问，核心是延迟初始化与实例缓存；观察者模式实现一对多依赖通知，含Subject与Observer角色，需注意内存泄漏与取消订阅。

单例模式确保一个类只有一个实例，并提供全局访问点；观察者模式定义对象间一对多依赖，当一个对象状态改变，所有依赖者自动收到通知。两者在 JavaScript 中实现简洁但需注意细节。

单例模式：用闭包或类+静态属性控制实例唯一性

核心是“延迟初始化 + 实例缓存”。避免每次 new 都创建新对象。

• 传统闭包写法（兼容性好）：
  <script>
  const Singleton = (function() {
    let instance;
    function createInstance() {
      return {
        data: [],
        add(item) { this.data.push(item); },
        get() { return this.data; }
      };
    }
    return {
      getInstance() {
        if (!instance) {
          instance = createInstance();
        }
        return instance;
      }
    };
  })();
  // 使用
  const a = Singleton.getInstance();
  const b = Singleton.getInstance();
  console.log(a === b); // true
  </script>
• ES6 Class 写法（更现代）：
  class Logger {
    static #instance;
    constructor() {
      if (Logger.#instance) {
        throw new Error("Already instantiated");
      }
      Logger.#instance = this;
    }
    static getInstance() {
      if (!Logger.#instance) {
        new Logger();
      }
      return Logger.#instance;
    }
    log(msg) { console.log("[LOG]", msg); }
  }
  // 使用
  const logger1 = Logger.getInstance();
  const logger2 = Logger.getInstance();
  console.log(logger1 === logger2); // true

观察者模式：手动实现发布-订阅机制

关键角色：Subject（被观察者）、Observer（观察者）。不依赖第三方库，纯 JS 就能搭出轻量通信总线。

PathFinder

AI驱动的销售漏斗分析工具

下载

• 基础版 Subject 类：
  class EventTarget {
    constructor() {
      this.observers = new Map();
    }
    subscribe(event, callback) {
      if (!this.observers.has(event)) {
        this.observers.set(event, new Set());
      }
      this.observers.get(event).add(callback);
    }
    unsubscribe(event, callback) {
      if (this.observers.has(event)) {
        this.observers.get(event).delete(callback);
      }
    }
    notify(event, data) {
      if (this.observers.has(event)) {
        for (const cb of this.observers.get(event)) {
          cb(data);
        }
      }
    }
  }
  // 使用示例
  const bus = new EventTarget();
  bus.subscribe("user-login", (user) => console.log("欢迎", user.name));
  bus.subscribe("user-login", (user) => console.log("更新头像"));
  bus.notify("user-login", { name: "张三" });
• 进阶建议：
  – 用 WeakMap 存 observer 可避免内存泄漏（尤其 DOM 元素作为 observer 时）
  – 加入 once 方法支持一次性监听
  – notify 支持异步（如 Promise.all）避免阻塞主线程

实际用在哪？别硬套，看场景

单例适合：全局配置管理、日志器、状态仓库（如简易版 store）、WebSocket 连接实例。
观察者适合：组件通信（尤其无框架时）、表单联动、事件解耦（比如按钮点击后多个模块响应）、状态变更广播。

基本上就这些。两种模式都不复杂，但容易忽略边界情况——比如单例没防 new，观察者没做取消订阅，上线后可能悄悄吃内存。

立即学习“Java免费学习笔记（深入）”；