闭包实现前端状态管理容器的核心是利用函数作用域封装私有状态并暴露可控读写接口。通过立即执行函数创建含私有state和监听器数组的闭包,返回含get(返回浅拷贝)、set(合并状态并触发监听)、subscribe(注册/取消监听)及computed(派生只读视图)方法的对象,支持响应式更新且轻量无依赖。

用闭包实现前端状态管理容器,核心是利用函数作用域封装私有状态,暴露可控的读写接口,避免全局污染和意外修改。
创建带私有状态的闭包容器
定义一个立即执行函数,内部声明状态对象和监听器数组,返回包含 get、set、subscribe 方法的对象:
- 状态变量(如 state)只在闭包内可访问,外部无法直接修改
-
get() 返回当前状态的浅拷贝(防止外部直接改写),可用
Object.assign({}, state)或展开运算符 - set(newState) 合并新状态,触发所有监听器,并返回新状态供链式调用
支持响应式订阅与自动更新
通过 subscribe(callback) 注册监听器,每次 set 后遍历执行。注意保存监听器引用以便后续取消:
Java Maven 项目审查工作流的通用输入处理。当 Java Maven 项目以 ZIP压缩包或 GitLab 仓库 URL 形式提供且需要...时使用。
- 返回一个 unsubscribe 函数,从监听器列表中移除该回调
- set 内部应确保只触发已注册且未被取消的监听器
- 可选:在 set 前后做深比较(如用
JSON.stringify粗略判断),避免无意义更新
添加简单状态派生与只读视图
不暴露原始 state,但可通过计算属性提供派生数据:
- 在返回对象中增加 computed(getter) 方法,传入函数生成只读派生值
- 也可在 set 后自动通知依赖该派生值的监听器(需额外维护依赖关系,简易版可手动触发)
- 例如:
store.computed(s => s.count > 5 ? 'busy' : 'idle')
实际使用示例
初始化容器后,组件可安全读写并响应变化:
const store = createStore({ count: 0, name: 'app' });store.subscribe(state => console.log('更新:', state));
store.set({ count: store.get().count + 1 });
这种模式轻量、无依赖,适合小型应用或教学演示;生产环境建议配合 Proxy 实现更完善的响应式能力,但闭包基础仍是理解状态封装的关键。
Java免费学习笔记:立即使用
解锁 Java 大师之旅:从入门到精通的终极指南










