先创建一个基于观察者模式的轻量级状态管理类，通过闭包封装状态，提供 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); } }
通过继承扩展功能，保持核心逻辑干净。
基本上就这些。这个模式不复杂但容易忽略细节，比如深拷贝问题或频繁触发更新。实际使用中可根据需要加入不可变性检查、批量更新或选择器优化。对于大多数小型应用，这种基于发布-订阅的简易状态管理已经足够有效。
暂无评论