摘要:類似于函數聲明類似于函數調用類似于調用時傳入回調函數對象來執行執行后的返回值稱為可以停止后續的執行還可以合在一起一起終止多個的執行是多個值的惰性推送集合。
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()
Observable是多個值的惰性推送集合。
Observable和普通函數的區別:
普通的function會同步的返回一個值,屬于一種拉取值的操作,你可以確定這個值是存在的,而Observable可以同步或異步的返回一個或多個值,屬于推送值的操作,類似于Promise,你并不確定這個值是否存在,也不知道何時會接收到數據,但是可以通過回調函數的方式,明確當值可用的時候做什么操作.
為什么要用Observable呢,因為它可以完成一些普通function完成不了的工作,比如:
純凈性純凈性使你的代碼無需引入外部狀態,更不容易出錯。
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`));流動性
RxJS 提供了一整套操作符來幫助你控制事件如何流經 observables ,代碼更簡潔,更可讀。
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類似于事件監聽,會在內部維護多個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))
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/97988.html
摘要:項目簡介本次使用了和開發了一個地址輸入框,主要實現的功能有限制輸入符合條件的字符并每隔兩位可以自動添加用于分割的冒號。項目屏蔽了的事件處理,同時使用來手動控制光標。繼承于和因此同時具有和兩者的方法。后面的和都是需要利用最新的來進行判斷的。 項目簡介 本次使用了RxJS和react開發了一個mac地址輸入框,主要實現的功能有限制輸入符合條件的字符1-9,a-f,并每隔兩位可以自動添加用于...
摘要:技術積累經過社區的努力學習資料還是很多的,官方中文文檔就已經很不錯,不過我們先從天精通初步感受一下然后配合一些中文文檔來補充知識點,最后再根據官方文檔來校驗整個知識體系。資料學習操作符的時候可以對照彈珠圖的交互彈珠圖的中文版中文文檔 前言 最近準備畢設,技術選型的時候因為功能的一些需求準備將RxJs融入到項目中,考慮RxJs的時候因為之前的技術棧還猶豫了一下,查了一些資料以及粗略瀏覽了...
摘要:年前端有哪些領域,技術值得關注,哪些技術會興起,哪些技術會沒落。自從谷歌提出后,就持續的獲得了業界的關注,熱度可見一斑。就在今年,谷歌也宣布將獲得與安卓原生應用同等的待遇與權限。但是無論都值得關注。 1.前言 2017悄然過去,2018已經來到。人在進步,技術在發展。2018年前端有哪些領域,技術值得關注,哪些技術會興起,哪些技術會沒落。下面就我個人的判斷進行一個預測判斷,希望能對大家...
摘要:年前端有哪些領域,技術值得關注,哪些技術會興起,哪些技術會沒落。自從谷歌提出后,就持續的獲得了業界的關注,熱度可見一斑。就在今年,谷歌也宣布將獲得與安卓原生應用同等的待遇與權限。但是無論都值得關注。 1.前言 2017悄然過去,2018已經來到。人在進步,技術在發展。2018年前端有哪些領域,技術值得關注,哪些技術會興起,哪些技術會沒落。下面就我個人的判斷進行一個預測判斷,希望能對大家...
閱讀 837·2021-11-18 10:07
閱讀 2355·2021-10-14 09:42
閱讀 5316·2021-09-22 15:45
閱讀 585·2021-09-03 10:29
閱讀 3462·2021-08-31 14:28
閱讀 1873·2019-08-30 15:56
閱讀 3038·2019-08-30 15:54
閱讀 994·2019-08-29 11:32