TypeScript 设计模式之观察者模式

栏目: IT技术 · 发布时间: 6年前

内容简介:我们可以使用日常生活中,期刊订阅的例子来形象地解释一下上面的概念。期刊订阅包含两个主要的角色:期刊出版方和订阅者,他们之间的关系如下:在观察者模式中也有两个主要角色:Subject(主题)和 Observer(观察者)。它们分别对应例子中的期刊出版方和订阅者。接下来我们来看张图,从而加深对上面概念的理解。

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

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

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

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

TypeScript 设计模式之观察者模式

二、优缺点

优点

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

缺点

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

三、应用场景

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

四、模式结构

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

  • Subject:主题类
  • Observer:观察者

TypeScript 设计模式之观察者模式

五、实战

具体实现

创建 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();
}

六、总结

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

欢迎小伙伴们订阅

前端

全栈修仙之路,及时阅读 Angular、TypeScript、Node.js/Java和Spring技术栈最新文章。

TypeScript 设计模式之观察者模式


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

SQL完全手册

SQL完全手册

格罗夫 / 电子工业 / 2006-6 / 68.00元

本书为专业和非专业用户、程序员、数据处理方面的专业人士和希望理解sQL在今天计算机产业中的影响的经理们提供了关于SQL语言的全面深入的介绍。本书为理解和使用SQL提供了一个概念上的框架,描述了SQL的历史和SQL的标准,解释了SQL在各种计算机产业领域(如企业级数据处理、数据仓库、Web站点体系结构)中的作用。这一版包含一些新的章节,专门讲述SQL在应用服务器体系结构中的作用、sQL与xML的集成......一起来看看 《SQL完全手册》 这本书的介绍吧!

SHA 加密
SHA 加密

SHA 加密工具

RGB HSV 转换
RGB HSV 转换

RGB HSV 互转工具