设计模式：观察者模式

设计模式：观察者模式：
定义了一种一对多的关系，让多个观察者对象同时监听某一个主题对象，这个主题对象的状态发生变化时就会通知所有的观察者对象，使它们能够自动更新自己，当一个对象的改变需要同时改变其它对象，并且它不知道具体有多少对象需要改变的时候，就应该考虑使用观察者模式。
特点
发布 & 订阅
一对多

/**
 * 订阅
 */
class Subject{
    constructor(){
        this.observerList=[];
        this.handleDataChange=this.handleDataChange.bind(this);
    }
    /**
     * 初始化代理数据
     * @param {*} obj 
     */

    initData(obj){
        let that=this;
        const handler = {
            set(target, key, value) {
              const rets = Reflect.set(target, key, value);
              that.handleDataChange(key,value);
              return rets;
            }
          };
       let data = new Proxy(obj, handler);
       return data;
    }
    /**
     * 数据发生改变 通知
     * @param {*} key 
     * @param {*} value 
     */

    handleDataChange(key,value){
        //遍历 观察者对应的key
        this.observerList.map((observer)=>{
               
               if(observer.key===key)
               {
                   observer.update(key,value)

               }
        })

    }

    attach(observer){
        this.observerList.push(observer);
    }
}
/**
 * 观察者
 */

class Observer{
    /**
     * 
     * @param {*} node dom节点
     * @param {*} key 
     */
    constructor(node,key){
        this.key=key;
        this.node=node;
    }
    /**
     * 更新
     * @param {*} key 
     * @param {*} value 
     */

    update(key,value){
        console.log(`key${key}发生变化：变化值为${value}`);
        //更新dom节点
        for(let item of this.node)
        {
            item.innerHTML=value;
        }
       
        
    }
}
let data={
    a:1,
    b:2
}

var s=new Subject();
//创建观察者
var ao=new Observer(document.getElementsByTagName('span'),'a');
var bo=new Observer(document.getElementsByTagName('p'),'b');
//被代理的数据
let proxyData=s.initData(data);
//添加观察者
s.attach(ao);
s.attach(bo);

proxyData.a=6;
proxyData.b=7;

在控制台

image.png
页面效果 image.png