設(shè)計(jì)模式：觀察者模式：
定義了一種一對(duì)多的關(guān)系，讓多個(gè)觀察者對(duì)象同時(shí)監(jiān)聽某一個(gè)主題對(duì)象，這個(gè)主題對(duì)象的狀態(tài)發(fā)生變化時(shí)就會(huì)通知所有的觀察者對(duì)象，使它們能夠自動(dòng)更新自己，當(dāng)一個(gè)對(duì)象的改變需要同時(shí)改變其它對(duì)象，并且它不知道具體有多少對(duì)象需要改變的時(shí)候，就應(yīng)該考慮使用觀察者模式。
特點(diǎn)
發(fā)布 & 訂閱
一對(duì)多

/**
 * 訂閱
 */
class Subject{
    constructor(){
        this.observerList=[];
        this.handleDataChange=this.handleDataChange.bind(this);
    }
    /**
     * 初始化代理數(shù)據(jù)
     * @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;
    }
    /**
     * 數(shù)據(jù)發(fā)生改變 通知
     * @param {*} key 
     * @param {*} value 
     */

    handleDataChange(key,value){
        //遍歷 觀察者對(duì)應(yīng)的key
        this.observerList.map((observer)=>{
               
               if(observer.key===key)
               {
                   observer.update(key,value)

               }
        })

    }

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

class Observer{
    /**
     * 
     * @param {*} node dom節(jié)點(diǎn)
     * @param {*} key 
     */
    constructor(node,key){
        this.key=key;
        this.node=node;
    }
    /**
     * 更新
     * @param {*} key 
     * @param {*} value 
     */

    update(key,value){
        console.log(`key${key}發(fā)生變化：變化值為${value}`);
        //更新dom節(jié)點(diǎn)
        for(let item of this.node)
        {
            item.innerHTML=value;
        }
       
        
    }
}
let data={
    a:1,
    b:2
}

var s=new Subject();
//創(chuàng)建觀察者
var ao=new Observer(document.getElementsByTagName('span'),'a');
var bo=new Observer(document.getElementsByTagName('p'),'b');
//被代理的數(shù)據(jù)
let proxyData=s.initData(data);
//添加觀察者
s.attach(ao);
s.attach(bo);

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

在控制臺(tái)

image.png

image.png