TypeScript 设计模式之观察者模式

更新日期: 2019-12-13阅读: 2k标签: 模式分享

复制链接

新浪微博

QQ 好友

扫一扫分享

观察者模式，它定义了一种一对多的关系，让多个观察者对象同时监听某一个主题对象，这个主题对象的状态发生变化时就会通知所有的观察者对象，使得它们能够自动更新自己。

我们可以使用日常生活中，期刊订阅的例子来形象地解释一下上面的概念。期刊订阅包含两个主要的角色：期刊出版方和订阅者，他们之间的关系如下：

期刊出版方 —— 负责期刊的出版和发行工作。
订阅者 —— 只需执行订阅操作，新版的期刊发布后，就会主动收到通知，如果取消订阅，以后就不会再收到通知。

在观察者模式中也有两个主要角色：Subject（主题）和 Observer（观察者）。它们分别对应例子中的期刊出版方和订阅者。接下来我们来看张图，从而加深对上面概念的理解。

二、优缺点

优点

支持简单的广播通信，自动通知所有已经订阅过的对象。
目标对象与观察者之间的抽象耦合关系能够单独扩展以及重用。

缺点

如果一个被观察者对象有很多的直接和间接的观察者的话，将所有的观察者都通知到会花费很多时间。
如果在观察者和观察目标之间有循环依赖的话，观察目标会触发它们之间进行循环调用，可能导致系统崩溃。

三、应用场景

一个对象的行为依赖于另一个对象的状态。或者换一种说法，当被观察对象（目标对象）的状态发生改变时，会直接影响到观察对象的行为。

四、模式结构

观察者模式包含以下角色：

Subject：主题类
Observer：观察者

五、实战

具体实现

创建 Subject 类

class Subject { 
    private observers: Observer[] = [];

    public addObserver(observer: Observer): void {
      console.log(observer, "is pushed!");
      this.observers.push(observer);
    }

    public deleteObserver(observer: Observer): void {
      console.log("remove", observer);
      const n: number = this.observers.indexOf(observer);
      n != -1 && this.observers.splice(n, 1);
    }

    public notifyObservers(): void {
      console.log("notify all the observers", this.observers);
      this.observers.forEach(observer => observer.notify());
    }
  }

定义 Observer 接口

interface Observer {
  notify: Function;
}

创建 ConcreteObserver 观察者类

class ConcreteObserver implements Observer{
    constructor(private name: string) {}

    notify() {
      console.log(`${this.name} has been notified.`);
    }
}

使用示例

function show(): void {
    const subject: Subject = new Subject();
    subject.addObserver(new ConcreteObserver("Semlinker"));
    subject.addObserver(new ConcreteObserver("Kakuqo"));
    subject.notifyObservers();
    subject.deleteObserver(new ConcreteObserver("Lolo"));
    subject.notifyObservers();
}

六、总结

观察者模式定义了对象间的一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都得到通知并被自动更新。该模式主要解决一个对象状态改变给其他对象通知的问题，而且要考虑到易用和低耦合，保证高度的协作。

原文 https://semlinker.com/ts-observer-pattern/

链接: https://www.fly63.com/article/detial/7258

TypeScript 设计模式之观察者模式

观察者模式，它定义了一种一对多的关系，让多个观察者对象同时监听某一个主题对象，这个主题对象的状态发生变化时就会通知所有的观察者对象，使得它们能够自动更新自己。

二、优缺点

优点

缺点

三、应用场景

四、模式结构

五、实战

具体实现

使用示例

六、总结

js设计模式之单例模式,javascript如何将一个对象设计成单例

前端设计模式：从js原始模式开始，去理解Js工厂模式和构造函数模式

JavaScript设计模式_js实现建造者模式

html和xhtml，DOCTYPE和DTD，标准模式和兼容模式

前端四种设计模式_JS常见的4种模式

javascript 策略模式_理解js中的策略模式

javascript观察者模式_深入理解js中的观察者模式

Vue中如何使用方法、计算属性或观察者

我最喜欢的 JavaScript 设计模式

Flutter 设计模式 - 简单工厂