先创建一个基于观察者模式的轻量级状态管理类，通过 闭包 封装 状态，提供 getState、setState 和 subscribe 方法实现响应式更新；在 dom 操作中订阅状态变化以自动渲染界面，如计数器示例所示；支持按功能拆分多个 Store 实例（如用户、主题），保持模块独立；可通过 继承 扩展 中间件 功能，如日志记录；适用于中小型项目，具备良好可维护性与扩展性。
在现代 前端 开发中，状态管理是构建可维护、可扩展应用的关键部分。虽然大型项目常使用 redux 或 MobX 这样的第三方库，但在中小型项目中，用原生 javaScript 实现一个轻量的状态管理机制更简洁高效。下面介绍如何用 javascript 构建一个简单但实用的状态管理模式。
创建一个响应式状态容器
核心思想是将应用状态集中管理，并在状态变化时自动通知依赖该状态的组件或函数。我们可以利用闭包和观察者模式来实现。
以下是一个简单的状态管理类：
class Store {constructor(initialState) {this.state = { ……initialState}; this.listeners = [];} // 获取当前状态 getState() { return this.state;} // 更新状态并通知监听器 setState(newState) {this.state = { ……this.state, ……newState}; this.listeners.forEach(listener => listener()); } // 订阅状态变化 subscribe(listener) {this.listeners.push(listener); // 返回取消订阅的函数 return () => { this.listeners = this.listeners.filter(l => l !== listener); }; } }
在组件中使用状态（例如 DOM 更新）
假设我们有一个计数器 ui，希望在状态变化时自动更新页面内容。
立即学习“Java 免费学习笔记（深入）”；
// 初始化状态 const store = new Store({count: 0}); // 页面元素 const counterDisplay = document.getElementById('counter'); const addButton = document.getElementById('add'); // 同步 UI 到状态 function render() { counterDisplay.textContent = store.getState().count; } // 订阅状态变化 store.subscribe(render); // 触发状态更新 addButton.addEventListener('click', () => {const current = store.getState().count; store.setState({count: current + 1}); }); // 初始渲染 render();
每次点击按钮，状态更新，所有订阅者（如 render 函数）都会被调用，确保视图与数据同步。
支持模块化与状态拆分
随着应用变大，可以将状态按功能模块划分。例如用户信息和主题设置分开管理：
const userStore = new Store({name: '', logged: false}); const themeStore = new Store({darkMode: false}); themeStore.subscribe(() => { document.body.className = themeStore.getState().darkMode ?'dark':'light'; });
每个模块独立运作，避免耦合，同时保持逻辑清晰。
加入中间件思想（可选进阶）
类似 Redux，我们也可以在 setState 前插入处理逻辑，比如打印日志或 异步 操作：
class LoggerStore extends Store {setState(newState) {console.log('旧状态：', this.state); console.log('新状态：', newState); super.setState(newState); } }
通过继承扩展功能，保持核心逻辑干净。
基本上就这些。这个模式不复杂但容易忽略细节，比如深拷贝问题或频繁触发更新。实际使用中可根据需要加入不可变性检查、批量更新或 选择器 优化。对于大多数小型应用，这种基于发布 - 订阅的简易状态管理已经足够有效。
