如何借助闭包定义特性在无现代打包环境下快速达到轻量级状态瞬时隔离

闭包实现状态瞬时隔离：通过工厂函数createStore封装私有state和listeners，返回getState、setState、subscribe三方法；多实例状态分离，快照读取防篡改，安全写入过滤危险类型，手动回调驱动UI，ES5兼容零配置。

直接用闭包定义状态，不依赖构建工具、不引入任何包，就能在纯浏览器环境（比如直接 `<script>` 引入）中实现状态瞬时隔离——关键在于把变量锁进函数作用域，只暴露可控接口。</script>

用工厂函数封装私有状态

每次调用工厂函数，都会生成一个独立作用域，里面的状态变量对外不可见，也不会被其他实例干扰：

• 定义一个 `createStore(initial)` 函数，内部声明 `let state = initial` 和 `const listeners = []`
• 返回对象，仅含 `getState()`、`setState()`、`subscribe()` 三个方法
• 多个调用如 `const a = createStore({x:1})` 和 `const b = createStore({y:2})`，彼此状态完全分离

确保读写安全：快照 + 单一入口

避免外部篡改原始状态，也防止误传非法值：

• `getState()` 不返回 `state` 本身，而是 `JSON.parse(JSON.stringify(state))` 或 `structuredClone(state)`（现代环境）
• `setState()` 统一接收新值或更新函数，写入前过滤 `undefined`、`function`、`window` 等危险类型
• 拒绝点号（`.`）、空字符串等无效 key，防止意外覆盖原型链或触发异常

支持即时响应但不绑定框架

不需要 React 的 `useEffect` 或 Vue 的响应式系统，靠回调手动驱动 UI 更新：

• `subscribe(cb)` 把回调存入数组，`setState()` 后遍历执行所有 cb
• 回调里可直接操作 DOM，例如 `el.textContent = store.getState().count`
• 返回取消订阅函数，便于清理：`const off = store.subscribe(render); // later → off()`

适配老环境且零配置启动

IE11 或无模块支持的页面也能跑，只需一行 script 引入即可用：

• 代码用 ES5 写法（`var`、`function`），避开 `const`/箭头函数（若需兼容旧版）
• 整个实现不到 20 行，可内联写在 HTML `<script>` 中，无需打包、编译、安装</script>
• 状态生命周期与模块一致：页面刷新即重置，无残留，天然“瞬时”