答案：通过Proxy监听状态变化并结合发布-订阅模式，实现轻量级状态管理。创建响应式对象拦截get/set操作，封装Store类管理状态、支持订阅与更新，配合DOM渲染实现视图自动更新，适用于小型项目或原理学习。
实现一个简单的状态管理库，核心是让数据变化可追踪，并在变化时通知相关组件更新。不需要依赖 Redux 或 MobX 这类复杂方案，用原生 JavaScript 就能写出轻量、易懂的状态管理器。
定义响应式状态
关键在于拦截状态的读取和修改。使用 Proxy 可以监听对象属性的变化，当数据改变时自动触发更新。
创建一个可响应的对象，拦截 get 和 set 操作：
function createReactive(data, callback) {
return new Proxy(data, {
get(target, key) {
return target[key];
},
set(target, key, value) {
target[key] = value;
callback(); // 状态变化时执行回调
return true;
}
});
}
封装状态管理 Store
把响应式逻辑封装成一个 Store 类，提供统一的访问和变更接口。
Store 应包含以下功能：
华友协同办公自动化OA系统
下载
华友协同办公管理系统(华友OA)，基于微软最新的.net 2.0平台和SQL Server数据库，集成强大的Ajax技术，采用多层分布式架构，实现统一办公平台，功能强大、价格便宜，是适用于企事业单位的通用型网络协同办公系统。 系统秉承协同办公的思想，集成即时通讯、日记管理、通知管理、邮件管理、新闻、考勤管理、短信管理、个人文件柜、日程安排、工作计划、工作日清、通讯录、公文流转、论坛、在线调查、
- 保存当前状态
- 支持订阅状态变化
- 提供修改状态的方法
class SimpleStore {
constructor(initialState) {
this.state = createReactive(initialState, () => {
this.listeners.forEach(fn => fn());
});
this.listeners = [];
}
subscribe(fn) {
this.listeners.push(fn);
// 返回取消订阅函数
return () => {
this.listeners = this.listeners.filter(f => f !== fn);
};
}
setState(updater) {
if (typeof updater === 'function') {
updater(this.state);
} else {
Object.assign(this.state, updater);
}
}
}
在视图中使用 Store
将 Store 与 DOM 结合，在状态变化时重新渲染页面部分。
例如，管理一个计数器：
const store = new SimpleStore({ count: 0 });
// 绑定 UI 更新
function render() {
document.getElementById('count').textContent = store.state.count;
}
// 初次渲染并订阅更新
render();
store.subscribe(render);
// 按钮点击更新状态
document.getElementById('inc').addEventListener('click', () => {
store.setState(state => { state.count += 1; });
});
基本上就这些。通过 Proxy 监听状态，用发布-订阅模式通知更新，就能实现一个极简但可用的状态管理库。适合小型项目或理解原理。
