单例模式通过闭包或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 实例。多次调用都返回同一个对象引用。
在现代前端项目中（使用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 = '';
};
任何地方导入这些方法，操作的都是同一份数据：
进销存产品库存管理系统完全基于 WEB 的综合应用解决方案, 真正的 B/S 模式, 使用asp开发, 不需任何安装, 只需一个浏览器, 企业领导, 业务人员, 操作人员可以在不同时间, 地点, 并且可动态, 及时反映企业业务的方方面面. 产品入库，入库查询 库存管理，库存调拨 产品出库，出库查询 统计报表 会员管理 员工管理 工资管理 单位管理 仓库管理 凭证管理 资产管理 流水账管理 产品分类
1689
// 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的核心思想。
单例模式适合管理生命周期贯穿整个应用的共享状态，例如：
但也需注意：
基本上就这些。单例模式配合模块系统和观察者机制，足以支撑中小型项目的全局状态管理需求，不复杂但容易忽略细节。
以上就是JavaScript单例模式_全局状态管理方案的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告
收藏
收藏
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
957
