单例模式通过闭包或ES6模块确保类仅有一个实例并提供全局访问点，常用于管理应用配置、用户信息等全局状态。相比全局变量更结构化，可结合观察者模式实现响应式更新，适用于中小型项目的状态管理，但需注意避免滥用导致调试困难及SSR数据串扰问题。
单例模式在JavaScript中是一种确保一个类仅有一个实例，并提供全局访问点的设计模式。在前端开发中，它常被用于管理全局状态，比如应用配置、用户信息、主题设置或数据缓存等。相比直接使用全局变量，单例模式更结构化、可维护性更强。
单例模式的基本实现
JavaScript没有类的私有字段（早期版本），但我们可以通过闭包或模块模式来模拟私有状态，防止外部随意修改。
最简单的单例是一个字面量对象：
const Config = {
apiUrl: 'https://api.example.com',
debug: true,
setApiUrl(url) {
this.apiUrl = url;
}
};
这种方式简单直接，但所有属性都是公开可改的，缺乏封装性。
立即学习“Java免费学习笔记（深入）”；
更推荐使用函数闭包来创建真正的私有状态：
const AppState = (function () {
let instance = null;
function createInstance() {
let user = null;
let theme = 'light';
return {
setUser(data) {
user = data;
},
getUser() {
return user;
},
setTheme(mode) {
theme = mode;
},
getTheme() {
return theme;
}
};
}
return {
getInstance() {
if (!instance) {
instance = createInstance();
}
return instance;
}
};
})();
getInstance() 确保整个应用中只存在一个 AppState 实例。多次调用都返回同一个对象引用。
现代写法：ES6+ 模块天然支持单例
在现代前端项目中（使用ES Module或CommonJS），模块本身就是单例的——模块代码只执行一次，导出的对象被所有导入者共享。
// store.js
let user = null;
let token = '';
export const setAuth = (userData, authToken) => {
user = userData;
token = authToken;
};
export const getAuth = () => ({ user, token });
export const clearAuth = () => {
user = null;
token = '';
};
任何地方导入这些方法，操作的都是同一份数据：
1.修正会员卡升级会员级别的判定方式2.修正了订单换货状态用户管理中心订单不显示的问题3.完善后台积分设置数据格式验证方式4.优化前台分页程序5.解决综合模板找回密码提示错误问题6.优化商品支付模块程序7.重写优惠卷代码8.优惠卷使用方式改为1卡1号的方式9.优惠卷支持打印功能10.重新支付模块，所有支付方式支持自动对账11.去掉规格库存显示12.修正部分功能商品价格显示4个0的问题13.全新的支
// componentA.js
import { setAuth } from './store.js';
setAuth({ name: 'Alice' }, 'token123');
// componentB.js
import { getAuth } from './store.js';
console.log(getAuth()); // { user: { name: 'Alice' }, token: 'token123' }
这种写法简洁且天然单例，无需手动管理 instance 是否已创建。
结合观察者模式实现响应式更新
纯单例管理状态还不够，组件往往需要在状态变化时自动更新。可以加入简单的事件机制：
// observableStore.js
let state = { user: null, theme: 'light' };
const listeners = [];
export const setState = (newState) => {
state = { ...state, ...newState };
// 通知所有监听者
listeners.forEach(fn => fn());
};
export const getState = () => state;
export const subscribe = (callback) => {
listeners.push(callback);
// 返回取消订阅函数
return () => {
const index = listeners.indexOf(callback);
if (index > -1) listeners.splice(index, 1);
};
};
在React或Vue组件中可以这样使用：
// 在组件挂载时订阅
useEffect(() => {
const unsubscribe = subscribe(render);
return unsubscribe;
}, []);
这样就实现了简易版的状态管理中心，类似Redux或Pinia的核心思想。
适用场景与注意事项
单例模式适合管理生命周期贯穿整个应用的共享状态，例如：
- 用户登录信息
- 应用配置项
- WebSocket连接实例
- 日志服务或埋点管理器
但也需注意：
- 避免滥用，过多全局状态会导致调试困难
- 单元测试时难以隔离，建议通过依赖注入解耦
- 在服务端渲染（SSR）中要小心，多个请求共享同一个实例可能引发数据串扰
基本上就这些。单例模式配合模块系统和观察者机制，足以支撑中小型项目的全局状态管理需求，不复杂但容易忽略细节。
