rxjs簡(jiǎn)介

cnsworder 發(fā)布于2019-08-23 12:08 / 1520人閱讀

摘要：類(lèi)似于函數(shù)聲明類(lèi)似于函數(shù)調(diào)用類(lèi)似于調(diào)用時(shí)傳入回調(diào)函數(shù)對(duì)象來(lái)執(zhí)行執(zhí)行后的返回值稱(chēng)為可以停止后續(xù)的執(zhí)行還可以合在一起一起終止多個(gè)的執(zhí)行是多個(gè)值的惰性推送集合。

Observable

Observable類(lèi)似于函數(shù)聲明

var observable = Rx.Observable.create(function subscribe(observer) {
  var id = setInterval(() => {
    observer.next("hi")
  }, 1000)
});

subscribe類(lèi)似于函數(shù)調(diào)用(類(lèi)似于function.call),調(diào)用時(shí)傳入回調(diào)函數(shù)observer對(duì)象來(lái)執(zhí)行

observable.subscribe({next:x => console.log(x)})

執(zhí)行后的返回值稱(chēng)為Subscription,可以停止后續(xù)Observable的執(zhí)行,Subscription還可以合在一起,一起終止多個(gè)Observable的執(zhí)行

var subscription = observable.subscribe({next:x => console.log(x)})
subscription.unsubscribe()

Observable是多個(gè)值的惰性推送集合。

Observable和普通函數(shù)的區(qū)別:

普通的function會(huì)同步的返回一個(gè)值,屬于一種拉取值的操作,你可以確定這個(gè)值是存在的,而Observable可以同步或異步的返回一個(gè)或多個(gè)值,屬于推送值的操作,類(lèi)似于Promise,你并不確定這個(gè)值是否存在,也不知道何時(shí)會(huì)接收到數(shù)據(jù),但是可以通過(guò)回調(diào)函數(shù)的方式,明確當(dāng)值可用的時(shí)候做什么操作.

為什么要用Observable呢,因?yàn)樗梢酝瓿梢恍┢胀╢unction完成不了的工作,比如:

純凈性

純凈性使你的代碼無(wú)需引入外部狀態(tài),更不容易出錯(cuò)。

var count = 0;
var button = document.querySelector("button");
button.addEventListener("click", () => console.log(`Clicked ${++count} times`));

// 使用rxjs
var button = document.querySelector("button");
Rx.Observable.fromEvent(button, "click")
  .scan(count => count + 1, 0)
  .subscribe(count => console.log(`Clicked ${count} times`));

流動(dòng)性

RxJS 提供了一整套操作符來(lái)幫助你控制事件如何流經(jīng) observables ,代碼更簡(jiǎn)潔,更可讀。

var count = 0;
var rate = 1000;
var lastClick = Date.now() - rate;
var button = document.querySelector("button");
button.addEventListener("click", () => {
  if (Date.now() - lastClick >= rate) {
    console.log(`Clicked ${++count} times`);
    lastClick = Date.now();
  }
});

var button = document.querySelector("button");
Rx.Observable.fromEvent(button, "click")
  .throttleTime(1000)
  .scan(count => count + 1, 0)
  .subscribe(count => console.log(`Clicked ${count} times`));

Subject

Subject類(lèi)似于事件監(jiān)聽(tīng),會(huì)在內(nèi)部維護(hù)多個(gè)observer

var subject = new Rx.Subject();

subject.subscribe({
  next: (v) => console.log("observerA: " + v)
});
subject.subscribe({
  next: (v) => console.log("observerB: " + v)
});

調(diào)用Subject.next時(shí)發(fā)送事件通知,將依次執(zhí)行Subject內(nèi)部維護(hù)的全部observer

var subject = new Rx.Subject();

subject.subscribe({
  next: (v) => console.log("observerA: " + v)
});
subject.subscribe({
  next: (v) => console.log("observerB: " + v)
});

subject.next(1)
subject.next(2)

在某個(gè)Observable聲明之后,進(jìn)行subscribe調(diào)用時(shí)也可以傳入Subject,這將依次執(zhí)行Subject內(nèi)部維護(hù)的全部observer

var subject = new Rx.Subject();

subject.subscribe({
  next: (v) => console.log("observerA: " + v)
});
subject.subscribe({
  next: (v) => console.log("observerB: " + v)
});

var observable = Rx.Observable.from([1, 2, 3]);

observable.subscribe(subject);

BehaviorSubject

BehaviorSubject是Subject的一個(gè)變體,它有一個(gè)“當(dāng)前值”的概念。當(dāng)前值是發(fā)送給消費(fèi)者的最后一個(gè)值。在new BehaviorSubject時(shí)可以初始化一個(gè)當(dāng)前值。當(dāng)有新的觀察者訂閱時(shí)，會(huì)立即從 BehaviorSubject 那接收到“當(dāng)前值”。

var subject = new Rx.BehaviorSubject(0); // 0是初始的當(dāng)前值

subject.subscribe({
  next: (v) => console.log("observerA: " + v)
});

subject.next(1);
subject.next(2);

subject.subscribe({
  next: (v) => console.log("observerB: " + v)
});

subject.next(3);

ReplaySubject

ReplaySubject類(lèi)似于BehaviorSubject,它有一個(gè)“緩沖值”的概念,可以想象成多個(gè)"當(dāng)前值"。在new ReplaySubject時(shí)可以初始化一個(gè)"緩沖值"的數(shù)量,當(dāng)有新的觀察者訂閱時(shí)，會(huì)立即從 ReplaySubject 那接收到每一個(gè)“緩沖值”。

除了緩沖數(shù)量，你還可以指定 window time (以毫秒為單位)來(lái)確定多久之前的值可以記錄。

var subject = new Rx.ReplaySubject(3); // 為新的訂閱者緩沖3個(gè)值

subject.subscribe({
  next: (v) => console.log("observerA: " + v)
});

subject.next(1);
subject.next(2);
subject.next(3);
subject.next(4);

subject.subscribe({
  next: (v) => console.log("observerB: " + v)
});

subject.next(5);

AsyncSubject

AsyncSubject 是另一個(gè) Subject 變體，只有當(dāng) Observable 執(zhí)行完成時(shí)(執(zhí)行 complete())，它才會(huì)將執(zhí)行的最后一個(gè)值發(fā)送給觀察者。

var subject = new Rx.AsyncSubject();

subject.subscribe({
  next: (v) => console.log("observerA: " + v)
});

subject.next(1);
subject.next(2);
subject.next(3);
subject.next(4);

subject.subscribe({
  next: (v) => console.log("observerB: " + v)
});

subject.next(5);
subject.complete();

總結(jié)

observable的執(zhí)行類(lèi)似函數(shù)調(diào)用,subject的執(zhí)行類(lèi)似事件監(jiān)聽(tīng).

observer是一些待執(zhí)行的函數(shù),Observable可以執(zhí)行observer,Subject也可以執(zhí)行observer,只不過(guò)是兩種不同的運(yùn)行模式,究竟用哪種視情況而定

操作符

操作符就是以特定的observer來(lái)訂閱原observable,然后返回一個(gè)以特定操作結(jié)果作為next值的新的Observable

function multiplyByTen(input) {
    // 原observable被封裝在新的observable內(nèi)部,只有外部的observable被訂閱時(shí)才會(huì)執(zhí)行內(nèi)部的訂閱
    const output = Observable.create(function subscribe(observer) {
        input.subscribe(val => {
            observer.next(val * 10)
        })
    })
    // 返回新的observable
    return output;
}

var source = Observable.create(function subscribe(observer) {
    observer.next(1)
    observer.next(2)
});

multiplyByTen(source).subscribe(val => console.log(val))