Rumah > hujung hadapan web > tutorial js > rxjs的详解

rxjs的详解

php中世界最好的语言
Lepaskan: 2018-03-13 16:31:24
asal
3324 orang telah melayarinya

这次给大家带来rxjs的详解,使用rxjs的注意事项有哪些,下面就是实战案例,一起来看一下。

rxjs(Reactive Extensions for JavaScript)是Javascript的响应式扩展, 响应式的思路是把随时间不断变化的数据、状态、事件等转成可被观察的序列(Observable Sequence),然后订阅序列中对象的变化,一旦变化,就会执行事先安排好的各种转换和操作。

rxjs适用于异步场景,可以用于优化前端交互中的请求、事件。

rxjs特点

统一异步编程的规范,不管是Promise、ajax还是事件,通通封装成序列(Observable Sequence),一旦有异步环节发生变更,观察序列即可截获发生变更的信息。

前端业务层和展现层解耦,比如展现层不需要关心指定事件触发时和DOM无关的处理逻辑。同时业务层也能组装异步操作中多个异步逻辑之间的关系,无需暴露给展现层。展现层关心的是:异步操作其中环节的数据变化。

rxjs开发业务层具有高弹性,高稳定性,高实时性等特点。

rxjs实例概念

Observable: 可观察的数据序列.

Observer: 观察者实例,决定何时观察指定数据.

Subscription: 观察数据序列返回订阅实例.

Operators: Observable的操作方法,包括转换数据序列,过滤等,所有的Operators方法接受的参数是上一次发送的数据变更的值,而方法返回值称为发射新数据变更.

Subject: 被观察对象.

Schedulers: 控制调度并发,即当Observable接受Subject的变更响应时,可以通过scheduler设置响应方式,目前内置的响应可以调用Object.keys(Rx.Subject)查看。

Observable四个生命周期:创建 、订阅 、 执行 、销毁。

创建Obervable,返回被观察的序列源实例,该实例不具备发送数据的能力,相比之下通过new Rx.Subject创建的观察对象实例具备发送数据源的能力。

通过序列源实例可以订阅序列发射新数据变更时的响应方法(回调方法)。

响应的动作实际上就是Observable的执行。

通过序列源实例可以销毁,而当订阅方法发生错误时也会自动销毁。

序列源实例的catch方法可以捕获订阅方法发生的错误,同时序列源实例可以接受从catch方法返回值,作为新的序列源实例。

rxjs操作符

rxjs中提供了很多操作符,用于创建Observable对象

import Rx from 'rxjs';

create

let observable = Rx.Observable
    .create((observer)=> {
        observer.next('hello');
        observer.next('world');
    });    
//订阅Observable    observable.subscribe((value)=> {    console.log(value);
});
Salin selepas log masuk

输出:hello
world

of

转换值变量

let observable = Rx.Observable.of('hello', 'world');
observable.subscribe({    next: (value)=> {        console.log(value);
    },    complete: ()=> {        console.log('complete');
    },    error: (error)=> {        console.log(error);
    }
});
Salin selepas log masuk

输出:hello
world
complete

from

转换数组变量

let array = [1, 2, 3];let observable = Rx.Observable.from(array);
observable.subscribe({    next: (value)=> {        console.log(value);
    },    complete: ()=> {        console.log('complete');
    },    error: (error)=> {        console.log(error);
    }
});
Salin selepas log masuk

输出:1

    2     3     complete
fromEvent
Salin selepas log masuk

转换事件变量

Rx.Observable.fromEvent(document.querySelector('button'), 'click');
fromPromise
Salin selepas log masuk

转换Promise(承诺)变量

let observable = Rx.Observable
.fromPromise(new Promise((resolve, reject) => {
    setTimeout(() => {
    resolve('hello world');
    },3000)
}));
observable.subscribe({    next: (value)=> {        console.log(value);
    },    complete: ()=> {        console.log('complete');
    },    error: (error)=> {        console.log(error);
    }
});
Salin selepas log masuk

输出:hello world
complete

empty

empty操作符返回一个空的Observable,订阅该对象,它会立即返回complete信息。

never

never操作符会返回一个无穷的Observable,订阅该对象,什么事情都不会发生,它是一个一直存在却什么都不做的Observable对象。

interval

interval操作符支持一个数值类型的参数,用于表示定时的间隔。

let observable = Rx.Observable.interval(1000);
observable.subscribe({    next: (value)=> {        console.log(value);
    },    complete: ()=> {        console.log('complete');
    },    error: (error)=> {        console.log(error);
    }
});
Salin selepas log masuk

输出:0

    1
     2
     ...
Salin selepas log masuk

上面代码表示每隔1s,会输出一个递增的值,初始值从0开始。

timer

timer操作符支持两个参数,第一个参数用于设定发送第一个值需等待的时间,第二个参数表示第一次发送后,发送其它值的间隔时间。

let observable = Rx.Observable.timer(1000, 5000);

observable.subscribe({    next: (value)=> {        console.log(value);
    },    complete: ()=> {        console.log('complete');
    },    error: (error)=> {        console.log(error);
    }
});
Salin selepas log masuk

输出:0   //1s后
    1   //5s后
    2   //5s后
    ...

Pull vs Push

Pull和Push是数据生产者和数据消费者两种不同的交流方式

Pull

在Pull体系中,数据的消费者决定何时从数据生产者那里获取数据,而生产者自身并不会意识到什么时候数据将会被发送给消费者。
每个JavaScript函数都是一个Pull体系,函数是数据的生产者,调用函数的代码通过拉出一个单一的返回值来消费该数据。
ES6中的iterator迭代器和generator生成器是另一种Pull体系,调用iterator.next()的代码是消费者,可从中拉取多个值。

Push

在Push体系中,数据的生产者决定何时发送数据给消费者,消费者不会在接收数据之前意识到它将要接收这个数据。
Promise是最常见的Push体系,一个Promise(数据的生产者)发送一个resolved(成功状态)或reject(失败状态)来执行一个回调(数据消费者),但是不同于函数的地方的是:Promise决定着何时数据才被推送至这个回调函数

RxJS引入了Observables(可观察对象),一个全新的Push体系。一个可观察对象是一个产生多值的生产者,当产生新数据的时候,会主动推送给Observer(观察者)。

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

前端开发中的SVG动画

一定要了解的TypeScript

Atas ialah kandungan terperinci rxjs的详解. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan