设计模式(9) 观察者模式

技术分享 3年前 (2022-04-25) 0 999+

关注

观察者模式

当对象间存在一对多关系时，则使用观察者模式（Observer Pattern）。比如，当一个对象被修改时，则会自动通知依赖它的对象。观察者模式属于行为型模式。

介绍

意图：定义对象间的一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都得到通知并被自动更新。

主要解决：一个对象状态改变给其他对象通知的问题，而且要考虑到易用和低耦合，保证高度的协作。

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

如何解决：使用面向对象技术，可以将这种依赖关系弱化。

**关键代码v：在抽象类里有一个 ArrayList 存放观察者们。

应用实例： 1、拍卖的时候，拍卖师观察最高标价，然后通知给其他竞价者竞价。 2、西游记里面悟空请求菩萨降服红孩儿，菩萨洒了一地水招来一个老乌龟，这个乌龟就是观察者，他观察菩萨洒水这个动作。

优点： 1、观察者和被观察者是抽象耦合的。 2、建立一套触发机制。

缺点： 1、如果一个被观察者对象有很多的直接和间接的观察者的话，将所有的观察者都通知到会花费很多时间。 2、如果在观察者和观察目标之间有循环依赖的话，观察目标会触发它们之间进行循环调用，可能导致系统崩溃。 3、观察者模式没有相应的机制让观察者知道所观察的目标对象是怎么发生变化的，而仅仅只是知道观察目标发生了变化。

使用场景

一个抽象模型有两个方面，其中一个方面依赖于另一个方面。将这些方面封装在独立的对象中使它们可以各自独立地改变和复用。
一个对象的改变将导致其他一个或多个对象也发生改变，而不知道具体有多少对象将发生改变，可以降低对象之间的耦合度。
一个对象必须通知其他对象，而并不知道这些对象是谁。
需要在系统中创建一个触发链，A对象的行为将影响B对象，B对象的行为将影响C对象……，可以使用观察者模式创建一种链式触发机制。
注意事项： 1、JAVA 中已经有了对观察者模式的支持类。 2、避免循环引用。 3、如果顺序执行，某一观察者错误会导致系统卡壳，一般采用异步方式。

实现

1，明星效应

class Star {     state: string = ''     observers: Array<Fan>      constructor(public name:string) {         this.name = name;         this.observers = [];     }      getState() {         return this.state;     }      setState(state:string) {         this.state = state;         this.notifyAllobservers();     }      attach(observer:Fan) {         this.observers.push(observer);     }      notifyAllobservers() {         if(this.observers.length>0) {             this.observers.forEach(observer => {                 observer.update();             })         }     } }  class Fan {     constructor(public name:string,public star:Star) {         this.name = name;         this.star = star;         this.star.attach(this);     }      update() {         console.log(`我的明星喜欢${this.star.getState()}，我也喜欢`);     } } let star = new Star('Angular Baby'); let f1 = new Fan('张三',star); star.setState('蓝色');

2,jquery Callbacks实现

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta http-equiv="X-UA-Compatible" content="IE=edge">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>Document</title> </head> <body>      </body> <script>     window.jQuery = {         Callbacks() {             let callbacks = [];              function add(fn) {                 callbacks.push(fn);             }              function remove(fn) {                 callbacks = callbacks.filter(item => item!=fn);             }              function fire(fn) {                 callbacks.forEach(element => {                     element();                 });             }              return {                 add,                 remove,                 fire             }         }     }     let callbacks = jQuery.Callbacks();     console.log(callbacks);     function a1() {console.log('a1')}     function a2() {console.log('a2')}     function a3() {console.log('a3')}     callbacks.add(a1);     callbacks.add(a2);     callbacks.add(a3);     callbacks.remove(a3);     callbacks.fire(); </script> </html>

3,creaeStore实现

function createStore(reducer) {     let state;     let listeners = [];     function getState() {         return state;     }     function subscribe(listener) {         listeners.push(listener);     }      function dispatch(actions) {         state = reducer(state,action);         listeners.forEach(listener => listener());     }      return {         getState,         subscribe,         dispatch     } }

4,eventEmitter实现

class eventEmitter {     events: Array<Array<Function>> = []     constructor() {      }      on(type: any, listener: Function) {         let listeners = this.events[type];         if (listeners) {             listeners.push(listener);         } else {             this.events[type] = [listener];         }     }      emit(type:any,...rest:any) {         let listeners = this.events[type];         let args = Array.prototype.slice.call(arguments).slice(1);         if(listeners) {             listeners.forEach(fn => {                 fn(...args);             })         }     } }  let emit = new eventEmitter(); emit.on('click',function(a:any,b:any,c:any) {     console.log(a,b,c); })  emit.emit('click',1,2,3);

5,发布订阅实现

import { join } from "path";  class Agent {     _events: any = {}     constructor() {      }      subscribe(type:string,listener:Function) {         let listeners = this._events[type];         if(listeners) {             this._events[type].push(listener);         } else {             this._events[type] = [listener];         }     }      publish(type:string,...rest:any) {         let listeners = this._events[type];         let args = Array.prototype.slice.call(arguments,1);         if(listeners) {             listeners.forEach((fn:Function) => fn(...args));         }     } }  //房东 class LandLoad {     constructor(public name:string) {          }     lend(agent:Agent,houseName:string,area:string,money:string) {//向外出租         agent.publish(houseName,area,money);     } }  //租客  class Tenant {     constructor(public name:string) {      }      rent(agent:Agent,houseName: string) {         agent.subscribe(houseName,(area:string,money:string)=>{             console.log(`我看到中介的新房源了 ${area}平方 租金 ${money}元`)         });     } }  let agent = new Agent(); let t1 = new Tenant('张三'); let t2 = new Tenant('李四'); t1.rent(agent,'house'); t2.rent(agent,'home'); let landLoad = new LandLoad('gzq'); landLoad.lend(agent,'home','60','12000');

发表评论