如何利用闭包管理跨页面组件的状态同步：基于单例闭包的同步方案

闭包单例是轻量级跨页面状态同步的理想方案，它通过私有状态、统一接口和实例唯一性，在无全局污染和低框架开销前提下提供可控的状态管理能力。

直接用闭包实现跨页面状态同步，核心不是“让所有页面读同一个变量”，而是“让所有页面操作同一套受控状态逻辑”。单例闭包在这里起的是状态容器 + 操作入口 + 隔离边界三重作用——它不自动同步，但为同步提供可信赖的底层基础。

为什么闭包比全局变量或 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