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