Observable
Observable類似於函數聲明
var observable = Rx.Observable.create(function subscribe(observer) {
var id = setInterval(() => {
observer.next('hi')
}, 1000)
});
subscribe類似於函數調用(類似於function.call
),調用時傳入回調函數observer
對象來執行
observable.subscribe({next:x => console.log(x)})
執行後的返回值稱爲Subscription,可以停止後續Observable的執行,Subscription還可以合在一起,一起終止多個Observable的執行
var subscription = observable.subscribe({next:x => console.log(x)})
subscription.unsubscribe()
Subject
Subject類似於事件監聽,會在內部維護多個observer
var subject = new Rx.Subject();
subject.subscribe({
next: (v) => console.log('observerA: ' + v)
});
subject.subscribe({
next: (v) => console.log('observerB: ' + v)
});
調用Subject.next
時發送事件通知,將依次執行Subject內部維護的全部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)
在某個Observable聲明之後,進行subscribe調用時也可以傳入Subject,這將依次執行Subject內部維護的全部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的一個變體,它有一個“當前值”的概念。當前值是發送給消費者的最後一個值。在new BehaviorSubject時可以初始化一個當前值。當有新的觀察者訂閱時,會立即從 BehaviorSubject 那接收到“當前值”。
var subject = new Rx.BehaviorSubject(0); // 0是初始的當前值
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類似於BehaviorSubject,它有一個“緩衝值”的概念,可以想象成多個"當前值"。在new ReplaySubject時可以初始化一個"緩衝值"的數量,當有新的觀察者訂閱時,會立即從 ReplaySubject 那接收到每一個“緩衝值”。
除了緩衝數量,你還可以指定 window time (以毫秒爲單位)來確定多久之前的值可以記錄。
var subject = new Rx.ReplaySubject(3); // 爲新的訂閱者緩衝3個值
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 是另一個 Subject 變體,只有當 Observable 執行完成時(執行 complete()),它纔會將執行的最後一個值發送給觀察者。
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();
總結
observable的執行類似函數調用,subject的執行類似事件監聽.
observer
是一些待執行的函數,Observable可以執行observer
,Subject也可以執行observer
,只不過是兩種不同的運行模式,究竟用哪種視情況而定
操作符
操作符就是以特定的observer
來訂閱原observable,然後返回一個以特定操作結果作爲next值的新的Observable
function multiplyByTen(input) {
// 原observable被封裝在新的observable內部,只有外部的observable被訂閱時纔會執行內部的訂閱
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))