美文网首页
设计模式:观察者模式

设计模式:观察者模式

作者: 泰然自若_750f | 来源:发表于2020-05-08 15:25 被阅读0次

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


/**
 * 订阅
 */
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

相关文章

  • 观察者设计模式

    每周学点Java设计模式__观察者设计模式 本次继续更新java23中设计模式之一——观察者模式。 观察者模式(有...

  • RxJava基础—观察者模式

    设计模式-观察者模式 观察者模式:观察者模式(有时又被称为发布(publish )-订阅(Subscribe)模式...

  • 设计模式02-观察者者设计模式

    [toc] 设计模式02-观察者者设计模式 主要来源Head First设计模式(书)观察者设计模式是JDK中使用...

  • 11.9设计模式-观察者模式-详解

    设计模式-观察者模式 观察者模式详解 观察者模式在android中的实际运用 1.观察者模式详解 2.观察者模式在...

  • RxJava设计模式与原理

    标准观察者设计模式 RxJava是一种特殊的观察者模式,首先我们先来看标准的观察者设计模式。在标准观察者模式中,存...

  • 设计模式

    常用的设计模式有,单例设计模式、观察者设计模式、工厂设计模式、装饰设计模式、代理设计模式,模板设计模式等等。 单例...

  • Guava源码分析——EventBus

    EventBus的设计理念是基于观察者模式的,可以参考设计模式(1)—观察者模式先来了解该设计模式。 1、程序示例...

  • 设计模式之观察者模式

    设计模式之观察者模式 本篇是设计模式系列博客的第四篇,本篇主要学习设计模式中的第二个行为型模式---观察者模式。 ...

  • PHP设计模式之观察者模式

    PHP设计模式之观察者模式

  • Android中涉及的模式

    我的Java设计模式-建造者模式 我的Java设计模式-观察者模式 重学设计模式之单例模式

网友评论

      本文标题:设计模式:观察者模式

      本文链接:https://www.haomeiwen.com/subject/fcmfnhtx.html