初步理解RxJs

选中文字可对指定文章内容进行评论啦,绿色背景文字可以点击查看评论额。

         学习是一个由浅入深的过程,如果能够理解并掌握二八原则(帕累托法则),那么我们对知识的学习定会事半功倍,甚至事半多倍。对基础知识的理解决定了对知识理解的深度。

RxJs定义

        RxJS是ReactiveX在JavaScript上的一个派生。ReactiveX是一个应用比较广泛的响应式编程框架,这个框架很好的应用了Observer Pattern(观察者模式),让异步编程变得简单且清晰。

 

理解Observable

        Observable的简单理解是:它是一个可观察对象,可以被订阅;它接收一个函数。(如何深入理解可观察对象请查看链接)

        以上理解可以看出:Observable有一个接收函数的构造器,它也有一个订阅方法。我们尝试定义一个吧。

let observerNumber = 0;  //为了后文说明RxJs的调用实际上就是一些Observable对象的链接。
export class MyObservable {
	//私有函数变量,用于触发订阅逻辑的执行
    _subscribe;

    constructor(subscribe)  {
        this._subscribe = subscribe;
        observerNumber++;
    }

    subscribe(observer) {
    	//这里的注释部分用于处理subscribe接收函数的情景
        // const defaultObserver = {
        //     next: () => { },
        //     error: () => { },
        //     complete: () => { }
        // }
        // if (typeof observer === 'function') {
        //     return this._subscribe({ ...defaultObserver, next: observer });
        // } else {
        //     return this._subscribe({ ...defaultObserver, ...observer });
        // }
        return this._subscribe(observer);
    }

    print() {
        console.log('observerNumber:',observerNumber);
    }
}

        通过上面代码和注解,我们可以看出,Observable的订阅方法接收一个对象,这个对象有三个方法:next,error,complete,但是我们平时的使用中,我们知道这个方法也可以接收一个函数。注释部分的代码就是Observable的订阅方法接收函数的情形。(注意,这里的本质上就是将函数复制到一个defaultObserver,然后启动执行)

        下面我们来尝试调用一下:

const myObservable =new MyObservable(observer=>{
    observer.next(1);
    setTimeout(() => {
        observer.next(2);
        observer.complete();
    }, 1000)
    observer.next(3);
});
const observer = {
    next: x => console.log(x),
    error: err => console.error(err),
    complete: () => console.log('done'),
}
myObservable.subscribe(observer);

可以看出,我这个自定义的Observable对象,起到了官方代码Observable的作用。从定义和执行可以看出,当执行

myObservable.subscribe(observer);这行代码时,实际上是将这个对象传递给被订阅的Observable对象的构造器的参数函数进行执行;也就是说这里的参数Observer实际上是传递给 

看我标注蓝色部门的这个函数,实际上是给这个函数执行,且参数刚好是构造器的参数函数的参数。比如这里执行

observer.next(1);这行代码的时候,实际上执行的是

const observer = {
    next: x => console.log(x),
    error: err => console.error(err),
    complete: () => console.log('done'),
}

上面对象的next方法,这里的参数是1,因此执行控制台打印出1这个值。后面的执行同理按此进行分析。

如果Observable的subscribe方法是一个函数,只需要将这个函数覆盖掉原始对象的next方法就可以啦。感兴趣的可以试着分析一下。

 

总结一下

1、Observable是一个构造器接收函数参数的类。

2、Observable有一个subscribe方法,这个方法可以接收一个函数或者一个对象作为参数,且这个对象有三个方法(至少一个next)next,error,complete。

3、Observabel执行subscribe方法的时候,启动整个运算,且subscribe方法的参数刚好是Observabel的构造器对应函数的输入参数。

4、一般情况下,我们都会调用observer.complete()来结束这个Observable的执行。(备注,以后我们会发现有的时候我们不会自动调用,而是由调用方来手动结束,比如Subject)

5、这里有一个小的问题就是,什么时候调用error方法呢?

 

版权声明:著作权归作者所有。

相关推荐

[译]Java 9:一步步迁移项目到Jigsaw(模块化)

Java 9出来了。 我们来试试一个简单的Spring项目。 为了使练习更具挑战性,我们还要尝试使用新的模块系统。 该项目只是一个使用Spring,JDBC和Shedlock的简单示例。1、阅读所有可用的文档和规格说明。 嗯,听起来很无聊。 跳过第一步。2、下载JDK并尝试运行该项目。 我们很幸运,我们所有的依赖只使用公共Jav

理解Java的数字溢出

Java各个数字类型所占的存储空间:整型byte:1字节,1*8bit,取值范围-128~127short:2字节,2*8bit,取值范围-32768~32767int:4字节,4*8bit,取值范围-2147483648~2147483647long:8字节,8*8bit,取值访问-2^64~2^64-1浮点型float:4字节,4*8bitdouble:8字节,8*8bitchar类型java

初识parcel

webpack是一个很好的web应用打包工具,但是使用webpack需要很多繁琐的配置。parcel则提供了一个零配置的方案,大大简化了使用web应用的工具的难度。Parcel特性Parcel有以下一些特性:1、相比于Webpack, Rollup以及Browserify,Parcel打包时间极快这是Parcel做的一个基准测试,基于一个合理大小的应用,包含1726个模块, 6

Rxjs expand的用法分析

Rxjs的expand()函数声明:public expand(project: function(value: T, index: number), concurrent: number, scheduler: Scheduler): Observable expand()会递归调用project函数,project函数把源值映射为一个Observable,每次递归

理解React Native的Props和State

Props和State是React Native分别用来控制组件中两种不同类型的数据。Propsprops是Properties的简写,称为属性。props的特点是在组件内它是不可变,或者说不能被修改。在React数据流是单向的,从父组件到子组件的方向传递。props就是组件从父组件接收的数据,在组件内部是不能对它修改。props不可变的特性是有助于我们写可复用的组件。我们只需要对一个组

理解RxJava里Observables的相关类型

Observable — Operator — ObserverObservable,可观察者,它就好像扬声器一样,做一些处理后发射出一些值。Operator,操作符,它就像翻译员那样将数据从一种形式翻译/修改为另一种形式。Observer,观察者,它获得那些由可观察者发射出来的或者有操作符转译的值。它们的关系如图: RxJava可观察类型在RxJava的可观察类型如下

Tomcat 8.5新安装环境初步配置优化

下载安装Tomcatwget http://mirrors.hust.edu.cn/apache/tomcat/tomcat-8/v8.5.37/bin/apache-tomcat-8.5.37.tar.gztar zxf apache-tomcat-8.5.37.tar.gz -C /usr/localmv /usr/local/apache-tomcat-8.5.37 /usr/local/t

初识JPA

1、什么是JPA?        JPA的全称是Java Persistence API,翻译成中文就是java对象持久化应用程序接口。JPA是Sun公司在Java EE5中提出的java对象持久化应用程序接口。2、JPA的优势是什么?标准化对容器级特性支持简单易用,集成方便可媲美JDBC的查询能力支持面向对象的高级特性3、JPA的缺点是什么?性能不好?学习

理解CKEditor5的schema

我们知道,CKEditor5是一个用MVC架构设计的富文本编辑器。如上图所示,三层分别是:Model,Controller, View首先,第一个问题是schema属于那一层?经过官方文档的初步学习,我们可以看到:editor.model.schema; // -> The model's schema.因此,我们可以得出结论:schema属于模型层:其次我们需

JPA实体状态深入理解

我们在学习JPA实体状态的时候,常常会问,JPA的实体有多少状态呢?相信这个问题不难回答:瞬时态(transient)托管态(persistent)游离态(detached)移除态(removed)注意:这里最后一个移除态,有的时候也叫删除态(deleted),至于它和移除态有啥区别,暂时没有想到,如果您对此有更加深刻的理解,请留言回复。为什么会有这四种状态呢?啥,这个也有为啥,网上不是都这么说的

CKEditor5——模型理解(一)

我们知道,CK5实现了一个MVC的架构,从今天开始,我们一步一步深入学习模型,视图,以及模型和视图之间的转换。今天我们开始模型的学习。首先,我们看模型的定义:The model is implemented by a DOM-like tree structure of elements and text nodes.模型由两类节点构成,分别是元素节点和文本节点,模型是一种类Dom树结构。我们知道

CKEditor5——模型理解(二:Node)

上一节我们理解了基本的CK5的模型基本信息,今天我们来学习一些模型的API。节点说明首先,需要理解的就是模型的节点。在这一点上,CK5的模型节点和dom的节点有点类似,也有一些不同。我会在文章中一一介绍。节点是模型树的基本结构。它是模型中不同节点类型的一种抽象。这里需要指出的一点是:如果一个节点从模型树中分离出来,你可以使用它的 API 来操作它。但是,非常重要的是,已经附加到模型树的节点只能通过

CKEditor5——模型理解(三:Element Text)

在上一节,我们学习了CK5中模型节点Node的API,今天我们学习另一个常用的API:Element。元素节点说明element表示模型的元素节点类型,它包含一个拥有名称和子节点的节点类型,继承自Node类。元素属性说明1、name,元素的名称举个例子哈,段落的名称是paragraph,代码块的名称是codeBlock等等。2、childCount, 子元素的数目这里指的是此元素节点包含的子元素的

javascript——generator理解

最近在学习CK5的时候,遇到了一个函数:function* _getAllUpcastDefinitions( definition ) { if ( definition.model.values ) { for ( const value of definition.model.values ) { const model = { key: definition.model.key

CKEditor5——模型理解(六:Range)

上一节我们主要介绍了模型中的Position这个关键的类,今天我们开始学习Range这个类。简单来说的话,如果Position表示一个点的话,那么Range是不是可以理解为一条线段呢?这个线段有一个startPostion,endPosition以及线段的长度等属性,我们暂且这么认为,那么我们可以看看Range官方的文档。从文档中看到,Range类有五个属性:Range属性start:Positi

CKEditor5——模型理解(七:Selection)

昨天我们学习了Range的一些API使用,今天我们看看另一个重要的类Selection的API:Selection的作用是记录鼠标在文档上的选择区域,如果是单个用户在编辑一份文档的时候,选择应该就是一个Range,如果是多个用户在编辑一份文档的时候,那么选择的区域就应该是多个range。因此,我大胆的猜测,Selection中应该有Range数组。我们来看看吧。Selection属性anchor

CKEditor5——Utils(工具类理解)

如果对CK5的代码有所理解的话,大概知道,CK5有一个非常重要的工具包项目,这个工具包非常重要,提供了CK5最基础的一些功能。比如:集合类Collection、事件类EmitterMixin、观察者类ObservableMixin等。今天我们暂缓学些以上的类,主要理解一个关于dom的类,那就是Position和Rect类,因为这两个类是CK5中弹出balloon工具条的基础类。我会一点点学习它的原