之前一直在写LINQ之类的东西,对于函数式的面向对象还是有一些功底,所以对于rxjs,感觉上不是很难,但是每次看完过几天就忘,还是记一下笔记吧,好记性不如烂笔头真不是盖的。

首先介绍几个重要的概念。

可以通过这个URL来详细了解相关知识:https://www.jianshu.com/p/f2f87925b229

rxjs中有几个重要的概念,有Observable、Observer、Subject,他们参考了观察者模式(或者叫发布/订阅模式)和迭代器模式。rxjs中有一个数据流的概念,和LINQ很类似,可以想象有一根管道,数据缓缓从管道中流过。发送数据的角色是生产者,消费数据的角色是观察者,观察者要想消费数据的话得知道生产者什么时候发送数据,也就是说,观察者要从生产者订阅一下通知,以便及时消费数据,这个过程就是由Observable来完成的。

Observable

Observevable是一个对象,如果要创建一个Observable,可以从如下两个例子来看:

 const observable$ = new Observable<number>(observer => {
observer.next(1);
observer.next(2);
observer.next(3);
observer.next(4);
return {
unsubscribe: () => {
console.log('complete');
}
};
});
const subscription = observable$.subscribe(value => console.log(value));

如上,生产者就是next(1)啊,next(2)啊中的1和2,Observable<number>则表示这个生产者是一个要发送number类型的生产者,给构造函数传入的function是一个接受一个observer的函数,这个observer对象拥有三个方法分别是next、error和complete。其中next方法用来消费生产者发送出来的数据,error用来捕获错误,complete用来通知完成。没错,这个observer就是一个观察者,观察者用来消费生产者发布的数据。

Observable内部可以想象成这样的一种结构:

class observable<T> {
_subscribe: (observer: Observer<T>) => Unsubscribable;
constructor(subscriber: (observer: Observer<T>) => Unsubscribable) {
this._subscribe = subscriber;
}
subscribe(observer: Observer<T>): Unsubscribable {
this._subscribe(observer);
return { unsubscribe: () => console.log('complete') };
}
}

上面的代码简单的诠释了一个Observable的内部结构,Observer<T>是一个观察者,它拥有next、complete和error三个方法。

除了上面这些,Observable还有冷和热的的区别,这个以后补充,现在着急介绍下一个功能。

Subject

subject是Observable和Observer的结合,从Observable来看,subject本身是继承了Observable,从Observer来看,subject是observer的鸭子类型(兼容)。Subject的内部是这样的:

class subject<T> {
_observers: Observer<T>[];
subscribe(observer: Observer<T>): void {
this._observers.push(observer);
}
next(value) {
this._observers.forEach(item => item.next(value));
}
complete() {
this._observers.forEach(item => item.complete());
}
error(value) {
this._observers.forEach(err => err.error(value));
}
}

不同于Observable的是Subject是多播的(组播),它可以通过一个生产者调动多个观察者。

基础的只知识就介绍到这里,下面介绍操作符。

rxjs一句话描述一个操作符(1)的更多相关文章

  1. ALTER OPERATOR CLASS - 修改一个操作符表的定义

    SYNOPSIS ALTER OPERATOR CLASS name USING index_method RENAME TO newname DESCRIPTION 描述 ALTER OPERATO ...

  2. Python练习——约瑟夫环问题、用类方法描述一个数字时钟

    一.约瑟夫环问题 有15个基督徒和15个非基督徒在海上遇险,为了能让一部分人活下来不得不将其中15个人扔到海里面去,有个人想了个办法就是大家围成一个圈,由某个人开始从1报数,报到9的人就扔到海里面,他 ...

  3. 第五十一个知识点:什么是基于ID的加密的安全模型,然后描述一个IBE方案

    第五十一个知识点:什么是基于ID的加密的安全模型,然后描述一个IBE方案 在公钥密码学中,如果Alice想要给Bob发送一条消息,她需要Bob的公钥,一般来说公钥都很长,就像一个随机的字符串. 假设A ...

  4. 第二十四个知识点:描述一个二进制m组的滑动窗口指数算法

    第二十四个知识点:描述一个二进制m组的滑动窗口指数算法 简单回顾一下我们知道的. 大量的密码学算法的大数是基于指数问题的安全性,例如RSA或者DH算法.因此,现代密码学需要大指数模幂算法的有效实现.我 ...

  5. DROP OPERATOR - 删除一个操作符

    SYNOPSIS DROP OPERATOR name ( lefttype | NONE , righttype | NONE ) [ CASCADE | RESTRICT ] DESCRIPTIO ...

  6. DROP OPERATOR CLASS - 删除一个操作符类

    SYNOPSIS DROP OPERATOR CLASS name USING index_method [ CASCADE | RESTRICT ] DESCRIPTION 描述 DROP OPER ...

  7. RxJS 中的创建操作符

    RxJs 中创建操作符是创建数据流的起点,这些操作符可以凭空创建一个流或者是根据其它数据形式创建一个流. Observable的构造函数可以直接创建一个数据流,比如: const $source=ne ...

  8. 重写toString()方法来描述一个类

    package com.zch.test; /* toString方法以及重写toString方法 toString方法是一个自我描述方法 方法本身返回的是该对象的实现类的 类名 + @ + hash ...

  9. 给定一个实数数组,按序排列(从小到大),从数组从找出若干个数,使得这若干个数的和与M最为接近,描述一个算法,并给出算法的复杂度。

    有N个正实数(注意是实数,大小升序排列) x1 , x2 ... xN,另有一个实数M. 需要选出若干个x,使这几个x的和与 M 最接近. 请描述实现算法,并指出算法复杂度. #define M 8 ...

随机推荐

  1. 使用asp.net mvc + entityframework + sqlServer 搭建一个简单的code first项目

    步骤: 1. 创建一个asp.net mvc 项目 1.1 项目创建好结构如下 2 通过vs安装EntityFramework框架 install-package entityframework 3. ...

  2. Phpstudy升级到Mysql8

    之前一直用的mysql5.5,最近发现Mysql8更新了很多新特性以及查询效率的提升,觉得很有必要更新下开发版本,好,废话不多说: 1.下载安装包,下载地址:mysql8.0  .如果你想要下载其它版 ...

  3. keil常用配置设置

    1.设置tab键为空格4个进入Configuration->Editor,设置如下: 2.代码自动补齐进入Configuration->Editor,设置如下: 3.使用快捷键实现批量注释 ...

  4. Android破解学习之路(八)—— 进化之地内购破解

    最近在TapTap闲逛,看到了进化之地这款游戏,TapTap上有两个进化之地,一个是在TapTap直接购买的,另外一个则是试玩版,玩到中间就会有个购买完整版. 试玩版连接:https://www.ta ...

  5. 20, CSS 定义选择器

    1. ID 与类 2. 层叠 3. 分组 4. 继承 5. 上下文选择器 6. 子类选择器 7. 其他选择器 8. 结构与注释 20.1 ID 与类 选择器是用于控制页面设计的样式.即 ID 选择器何 ...

  6. 如何用ABP框架快速完成项目(面向项目交付编程面向客户编程篇)(1) - 目录

    昨天发表了<如何用ABP框架快速完成项目 - 自动化测试 - 前端angular e2e protractor>后,大家十分热情,几个小时内就收到了不少问题,包括: 对于ui自动化测试这方 ...

  7. vue中引用swiper轮播插件

    有时候我们需要在vue中使用轮播组件,如果是在vue组件中引入第三方组件的话,最好通过npm安装,从而进行统一安装包管理. 申明:本文所使用的是vue.2x版本. 通过npm安装插件: npm ins ...

  8. 轨迹系列1——一种基于路网图层的GPS轨迹优化方案

    文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/ 1.背景 GPS数据正常情况下有20M左右的偏移,在遇到高楼和桥梁等情况 ...

  9. ButterKnife注解式绑定控件

    Butter Knife Android为控件设计的注解绑定库. github地址:https://github.com/JakeWharton/butterknife 添加依赖:(具体看github ...

  10. 章节九、1-Selenium环境配置

    一.Selenium环境安装配置,这里使用Selenium WebDriver 3.6.0 1.下载Selenium WebDriver (点击后网站响应比较慢,需要多等等) 2.打开该网址后点击“d ...