proxy 可拦截对象属性访问与赋值,实现轻量级发布订阅:用 proxy 包裹对象,set 拦截器触发对应 key 的监听回调;支持 on/off/trigger 方法、通配符监听、深层响应及批量更新优化。

Proxy 可以拦截对象的属性访问和赋值操作,借此我们能监听数据变化并触发对应的订阅回调,从而实现轻量级的发布订阅模式。核心思路是:用 Proxy 包裹一个普通对象,当某个属性被修改时,自动通知所有订阅了该属性的函数。
创建可响应的事件总线
定义一个基础事件管理器,内部维护每个属性对应的回调列表。Proxy 的 set 拦截器在属性更新时遍历并执行对应回调。
- 初始化时用
Map存储每个 key 的 listeners 数组 - Proxy 的
set中先执行原赋值逻辑,再检查是否有该 key 的监听者 - 触发时传入新旧值,便于订阅者做差异判断
封装成易用的响应式对象
提供 on(key, callback) 订阅、off(key, callback) 取消订阅、trigger(key, value) 手动触发(可选)等方法,让接口贴近习惯。
macOS 微信消息自动化工具。通过 GUI 自动化实现:发送消息给指定联系人、读取聊天内容、监控新消息。适用于需要自动化微信操作的场景,如定时发送、批量回复、消息备份等。依赖 peekaboo 进行屏幕截图和 UI 交互。仅支持 macOS。开源地址:https://github.com/chairmanmia...
- 订阅时把 callback 加入对应 key 的 listener 列表,注意去重或支持重复注册
- 取消订阅需精确匹配函数引用,建议用 WeakMap 或 ID 标识管理
- 可支持通配符(如
*)监听所有属性变更,靠Reflect.set后统一广播
处理嵌套属性与批量更新
默认 Proxy 只拦截第一层属性。若需响应深层变化,需递归代理或结合 Reflect.get + get 拦截器返回代理对象。
- 简单场景下,约定只监听顶层字段,避免过度代理开销
- 批量赋值(如
Object.assign)会多次触发 set,可用防抖或事务标记合并通知 - 避免在回调中直接修改被代理对象,防止无限循环(可加锁或检测调用栈)
实际使用示例
比如管理 UI 状态:
const state = reactive({ count: 0, name: 'Alice' });
state.on('count', (newVal, oldVal) => {
console.log(`count 从 ${oldVal} 变为 ${newVal}`);
});
state.count = 1; // 自动触发回调
state.name = 'Bob'; // 触发 name 的监听(如果有)
这种模式不依赖框架,适合配置中心、跨组件通信或调试工具中的状态追踪。










