闭包单例是轻量级跨页面状态同步的理想方案，它通过私有状态、统一接口和实例唯一性，在无全局污染和低框架开销前提下提供可控的状态管理能力。
直接用闭包实现跨页面状态同步，核心不是“让所有页面读同一个变量”，而是“让所有页面操作同一套受控状态逻辑”。单例闭包在这里起的是状态容器 + 操作入口 + 隔离边界三重作用——它不自动同步，但为同步提供可信赖的底层基础。
为什么闭包比全局变量或 store 更适合轻量级跨页同步
全局变量（如 window.state）易被误改、无访问控制、无法监听变更；而完整状态库（如 Pinia）对简单场景又过于厚重。闭包单例刚好落在中间：
- 实例只初始化一次，所有页面 import 同一模块，拿到的是同一对象引用（
=== true） - 内部状态（如
lastSyncTime、pendingUpdates）完全私有，外部只能通过公开方法操作 - 无需依赖响应式系统，也能通过回调、事件或主动轮询实现状态通知
- 天然兼容 SSR：DOM 相关逻辑可延迟到
getInstance()内部判断typeof window !== 'undefined'后执行
典型结构：一个可复用的同步管理器闭包
以下是一个兼顾小程序、H5 和 ArkUI 场景的通用写法（ESM 模块）：
注意：不暴露构造函数，不导出内部变量，所有状态变更必须走方法接口
const PageStateSync = (function () {
let instance = null;
function createInstance() {
const state = {
userInfo: null,
unreadCount: 0,
lastUpdate: 0
};
const listeners = new Map(); // 页面注册的回调
return {
// 获取当前状态（只读快照）
getState() {
return { ...state };
},
// 更新并通知所有监听者
update(key, value) {
state[key] = value;
state.lastUpdate = Date.now();
listeners.get(key)?.forEach(cb => cb(value));
},
// 页面注册监听（例如在 onShow 或 useEffect 中调用）
watch(key, callback) {
if (!listeners.has(key)) listeners.set(key, new Set());
listeners.get(key).add(callback);
// 立即触发一次初始值
callback(state[key]);
return () => listeners.get(key)?.delete(callback);
},
// 手动触发全量同步（如登录后拉取最新数据）
syncFromServer() {
// 这里可封装 fetch + update 逻辑，闭包内状态自动生效
}
};
}
return {
getInstance() {
if (!instance) {
instance = createInstance();
}
return instance;
}
};
})();
// 使用方式（任意页面/组件中）
const sync = PageStateSync.getInstance();
sync.watch('userInfo', (user) => {
console.log('用户信息已更新:', user);
});
sync.update('unreadCount', 5); // 所有监听该 key 的页面都会收到
配合平台机制增强同步可靠性
闭包本身不解决跨进程或冷启动问题，需结合平台能力补足：
-
小程序：watch 之后，在
onShow中调用syncFromServer()主动拉取；关键字段（如 token）同时写入getApp().globalData并触发自定义事件 -
ArkUI / HarmonyOS：用
@LocalStorageLink('unreadCount')绑定闭包内的值，实现 UI 层自动响应；后台服务可通过AppStorage触发跨页面通知 -
H5 单页应用：监听
visibilitychange，页面切回前台时调用syncFromServer()；配合localStorage持久化lastUpdate，避免重复拉取
避坑要点：闭包不是银弹
几个高频失效场景和应对方式：
-
模块热更新（HMR）导致 instance 重置：确保该模块只在应用入口引入一次，不要在组件内部反复 import；开发时可加日志验证
console.log('sync instance id:', sync === PageStateSync.getInstance()) -
多标签页不同步：闭包只管单页内一致性。如需跨标签同步，需额外用
localStorage+storage事件广播变更 -
异步初始化冲突：若
createInstance()包含 Promise（如加载 i18n），需缓存 promise 实例，避免多次 await 不同 promise 导致状态错乱 -
内存泄漏：页面卸载时务必调用
watch返回的清理函数，或统一用 WeakMap 存储 listener，避免强引用阻止 GC
