proxy实现观察者模式 (亦即订阅发布)

const queuedObservers = new Set();

const observe = fn => queuedObservers.add(fn); // 将处理函数加进队列
const observable = obj => new Proxy(obj, {set}); // 给对象加代理

function set(target, key, value, receiver) {
const result = Reflect.set(target, key, value, receiver);
queuedObservers.forEach(observer => observer());
return result;
}

// 这里只对 proxy 的 set 操作做代理 ,其他操作是类似的
//大致思路应该是 我们做 mvvm 将 针对 新增(set)data 属性要做的处理 写成 一系列的函数 放进 set 结构 queuedObservers
// 然后对属性 执行 observable() 添加 set 代理 那么当我们新增属性, 就会遍历执行 queuedObservers 的函数

function test(){
console.log("this is test");
}

function test2(){
console.log("this is test2");
}

observe(test);
observe(test2);

let obj = {
a:123
}

let k = observable(obj);
k.b = 6
console.log(k.b);

posted @ 2025-04-07 09:55  Zzp_zzZ  阅读(5)  评论(0)    收藏  举报