TypeScript 设计模式之观察者模式

时间: 2019-12-13阅读: 75标签: 模式

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

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

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

在观察者模式中也有两个主要角色: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/

吐血推荐

1.站长广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入...

2.休闲娱乐: 直播/交友    优惠券领取   网页游戏   H5游戏

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

JS 中的装饰器模式

使用过 mobx + mobx-react 的同学对于 ES 的新特性装饰器肯定不陌生。我在第一次使用装饰器的时候,我就对它爱不释手,书写起来简单优雅,太适合我这种爱装 X 且懒的同学了。

前端JavaScript设计模式

面向对象的三大特性:继承、封装、多态。JavaScript 没有提供传统面向对象语言中的类式继承,而是通过原型委托的方式来实现对象与对象之间的继承。JavaScript 也没有在语言层面提供对抽象类和接口的支持。

TypeScript设计模式之享元模式

享元模式就是运行共享技术有效地支持大量细粒度的对象,避免大量拥有相同内容的小类的开销(如耗费内存),使大家共享一个类,在享元模式中有两个重要的概念,即内部状态和外部状态:

Js实现基于类的枚举模式

枚举是由一组值组成的类型。例如 TypeScript 中有内置的枚举,我们可以通过它们来定义自己的布尔类型:这段 TypeScript 代码会被编译为以下 JavaScript 代码

TypeScript 设计模式之单例模式

单例模式是一种常用的模式,有一些对象我们往往只需要一个,比如线程池、全局缓存、浏览器中的 window 对象等。单例模式用于保证一个类仅有一个实例,并提供一个访问它的全局访问点。

TypeScript 设计模式之适配器模式

在实际生活中,也存在适配器的使用场景,比如:港式插头转换器、电源适配器和 USB 转接口。 而在软件工程中,适配器模式的作用是解决两个软件实体间的接口不兼容的问题

从一道面试题简单谈谈发布订阅和观察者模式

今天的话题是javascript中常被提及的「发布订阅模式和观察者模式」,提到这,我不由得想起了一次面试。记得在去年的一次求职面试过程中,面试官问我,你在项目中是怎么处理非父子组件之间的通信的?。

js设计模式:观察者和发布订阅模式

总是把这两个当作同一个模式,但其实是不太一样的,现在重温一下。观察者直接订阅目标,当目标触发事件时,通知观察者进行更新;发布订阅模式通过一个调度中心进行处理,使得订阅者和发布者分离开来

Typescript 严格模式有多严格?

use strict指令在 JavaScript 1.8.5 (ECMAScript5) 中新增。至今,前端 er 们基本都默认开启严格模式敲代码。那么,你知道 Typescript 其实也有属于自己的严格模式吗?

为什么学习JavaScript设计模式?

那么什么是设计模式呢?当我们在玩游戏的时候,我们会去追求如何最快地通过,去追求获得已什么高效率的操作获得最好的奖品;下班回家,我们打开手机app查询最便捷的路线去坐车;叫外卖时候,也会找附近最近又实惠又好吃的餐厅叫餐

fly63.com版权所有,内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权,请与小编联系!情况属实本人将予以删除!

文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全