// chen// 被观察者classSubject{constructor(){this.observers=[];}add(observer){this.observers.push(observer);}remove(observer){letidx=this.observers.findIndex(item=>item===observer);idx>-1&&this.observers.splice(idx,1)}notify(){for(letobserverofthis.observers){observer.update();}}}// 观察者classObserver{constructor(name){this.name=name;}update(){console.log('目标通知我更新了')}}使用Proxy实现观察者模式
// 实现constqueuedObservers=newSet();constobserver=fn=>queuedObservers.add(fn);// Proxy可以理解成，在目标对象之前 多加一层“拦截”constobservalbe=obj=>newProxy(obj,{// 拦截对象属性的设置 依次为目标对象，属性名，属性值 和 Proxy 实例本身set: function(target,key,value,receiver){constresult=Reflect.set(target,key,value,receiver);queuedObservers.forEach(observer=>observer());returnresult;}})// 甜妹// 观察者模式classObservable{constructor(){this.observers=[]}subscribe(func){this.observers.push(func)}unsubscribe(func){this.observers=this.observers.filter((observer)=>observer!==func)}notify(data){this.observers.forEach((observer)=>observer(data))}}// proxy// 先定义一个 set 集合, 所有观察者都放在这个集合。// observable 函数返回一个原始对象的 Proxy 代理，拦截赋值操作，触发充当观察者的各个函数// 拦截函数 set 之中，会自动执行所有观察者constqueuedObservers=newSet();constobserve=(fn=queuedObservers.add(fn))constobservable=(obj=newProxy(obj,{ set }))functionset(target,key,value,receiver){constresult=Reflect.set(target,key,value,receiver);queuedObservers.forEach((observer)=>observer())returnresult}