想象你在办公室里只有一台打印机，所有人共享使用。如果每次打印都要重新组装一台新机器，不仅浪费资源，还可能引发耗材冲突。前端开发中的单例模式就像这台「共享打印机」，确保全局唯一实例，避免重复创建和资源浪费。

核心价值：

1. 资源管控：共享WebSocket连接、缓存池等重量级资源
2. 状态同步：确保全局数据一致性（如用户登录状态）
3. 性能优化：避免重复初始化带来的性能损耗

必会实现技巧

1. 闭包封装法（通用性强）

const Singleton = (() => {  
  let instance;  
  function createInstance() {  
    return { api: "我是共享资源" };  
  }  
  return {  
    getInstance: () => instance || (instance = createInstance())  
  };  
})();  
// 使用  
const s1 = Singleton.getInstance();  
const s2 = Singleton.getInstance();  
console.log(s1 === s2); // true  

适用场景：浏览器环境、兼容ES5项目

2. ES6静态属性（现代框架推荐）

class CacheManager {  
  static instance;  
  constructor() {  
    if (CacheManager.instance) return CacheManager.instance;  
    this.data = {};  
    CacheManager.instance = this;  
  }  
  set(key, value) {  
    this.data[key] = value;  
  }  
}  
// 使用  
const cache1 = new CacheManager();  
const cache2 = new CacheManager();  
cache1.set('user', '张三');  
console.log(cache2.data.user); // 张三  

优势：代码更符合现代框架规范，适合Vue/React项目

实战场景解析

场景1：全局状态管理（替代Redux轻量方案）

class GlobalState {  
  static instance;  
  constructor() {  
    if (GlobalState.instance) return GlobalState.instance;  
    this.state = { user: null };  
    GlobalState.instance = this;  
  }  
  // 状态更新方法...  
}  

价值：小型项目避免引入Redux复杂度，保持状态同步

场景2：弹窗控制器（性能优化）

const ModalController = (() => {  
  let modal;  
  return {  
    getModal: () => {  
      if (!modal) {  
        modal = document.createElement('div');  
        // 初始化弹窗DOM...  
      }  
      return modal;  
    }  
  };  
})();  

效果：避免重复创建/销毁DOM元素

场景3：API请求池（防止重复提交）

class RequestPool {  
  static instance;  
  constructor() {  
    if (RequestPool.instance) return RequestPool.instance;  
    this.pending = new Map();  
    RequestPool.instance = this;  
  }  
  add(requestId) {  
    if (this.pending.has(requestId)) return false;  
    this.pending.set(requestId, Date.now());  
    return true;  
  }  
}  

优势：有效拦截重复请求，降低服务器压力

Tags：前端设计模式

微信扫一扫：分享

微信里点“发现”，扫一下

二维码便可将本文分享至朋友圈。