js设计模式--行为型--观察者模式

　　行为型：观察者模式

　　观察者模式：定义一种一对多的依赖关系，让多个观察者对象同时监听某一个对象，当这个目标对象的状态发生改变时，会通知所有的观察者对象，使它们自动更新。

　　使用：一个对象（目标对象）的状态发生改变，所有依赖对象（观察者对象）都将得到广播通知。

　　方式：使用面向对象技术，将这种依赖关系弱化。

　　案例：如有一个聊天群，里面有产品经理，前端，后端，UI，产品经理会把需求发到群里，然后@所有人，这个过程就是观察者模式。

  1 /**
  2  * 观察者模式
  3  **/
  4 // 定义 基础 发布者类
  5 class Publisher {
  6   constructor() {
  7     this.observers = [];
  8     console.log("Publisher 初始化");
  9   }
 10   // 增加订阅者
 11   add(observer) {
 12     console.log("新增订阅者");
 13     this.observers.push(observer);
 14   }
 15   // 移除订阅者
 16   remove(observer) {
 17     console.log("移除订阅者");
 18     this.observers.forEach((item, i) => {
 19       if (item === observer) {
 20         this.observers.splice(i, 1);
 21       }
 22     });
 23   }
 24   // 通知订阅者
 25   notify() {
 26     console.log("通知订阅者");
 27     this.observers.forEach((observer) => {
 28       observer.update(this);
 29     });
 30   }
 31 }
 32 
 33 // 定义 基础 订阅者类
 34 class Observer {
 35   constructor() {
 36     console.log("初始化订阅者");
 37   }
 38   update() {
 39     console.log("更新订阅者");
 40   }
 41 }
 42 
 43 // 定义具体的 发布类
 44 class PrdPublisher extends Publisher {
 45   constructor() {
 46     /** super
 47      * 表示父类的构造函数，用来新建父类的this对象。
 48      * 在子类的构造函数中，只有调用super之后，才可以使用this关键字，
 49      * 否则会报错。这是因为子类实例的构建，是基于对父类实例加工，只有super方法才能返回父类实例。
 50      * */
 51     super();
 52     // 初始化
 53     this.prdState = null;
 54     this.observers = [];
 55     console.log("具体的发布类，初始化");
 56   }
 57   //获取当前的 prdState
 58   getState() {
 59     console.log("获取当前 prdState");
 60     return this.prdState;
 61   }
 62   // 改变 prdState 的值
 63   setState(state) {
 64     console.log("改变 prdState");
 65     // prd的值发生改变
 66     this.prdState = state;
 67     // 需求文档变更，立刻通知所有开发者
 68     this.notify();
 69   }
 70 }
 71 
 72 // 定义具体的 观察者
 73 class DevObserver extends Observer {
 74   constructor() {
 75     super();
 76     this.prdState = {};
 77     console.log("初始化 观察者");
 78   }
 79   // 具体的更新方法
 80   update(publisher) {
 81     // 更新
 82     this.prdState = publisher.getState();
 83     // 调用工作函数
 84     this.work();
 85   }
 86   work() {
 87     // 具体的业务方法
 88     console.log("具体业务方法");
 89   }
 90 }
 91 
 92 // 创建订阅者：前端开发李雷
 93 const liLei = new DevObserver();
 94 const A = new DevObserver();
 95 const B = new DevObserver();
 96 // 韩梅梅出现了
 97 const hanMeiMei = new PrdPublisher();
 98 // 需求文档出现了
 99 const prd = {
100   // 具体的需求内容
101 };
102 // 韩梅梅开始拉群
103 hanMeiMei.add(liLei);
104 hanMeiMei.add(A);
105 hanMeiMei.add(B);
106 // 韩梅梅发送了需求文档，并@了所有人
107 hanMeiMei.setState(prd);

　　观察者模式和发布-订阅者模式的区别？

　　相同：在核心思想，运行机制没有本质的差别。

　　不同：发布者直接触及到订阅者的操作，叫做观察者模式。

　　　　   发布者不直接触及到订阅者，而是由统一的第三方来完成实际的通信操作，叫做发布-订阅者模式。

 

posted @ 2021-04-20 16:31  SaBoo  阅读(90)  评论(0)  编辑  收藏  举报