[譯]RxJS文檔01——介紹

BlackHole1 發布于2019-08-20 17:30 / 2361人閱讀

摘要：原文是一個使用可觀察量隊列解決異步編程和基于事件編程的庫。提供了幾個管理異步事件的核心概念可觀察量，代表了一個由未來獲取到的值或事件組成的集合。相當于事件觸發器，是向多個廣播事件或推送值的唯一方法。

原文:http://reactivex.io/rxjs/manu...

RxJS 是一個使用可觀察量(observable)隊列解決異步編程和基于事件編程的js庫。
他提供了一個核心的類型Observable，和若干附屬類型(Observer、Schedulers、Subject)以及一組的操作符(map,filter,reduce,every等等)，可以像操作集合一樣處理異步事件流。

Think of RxJS as Lodash for events.

為了較好的管理事件隊列，響應式編程組合了觀察者模式和迭代器模式，并且提供了操作集合的函數式編程方法。

RxJS提供了幾個管理異步事件的核心概念:

Observable: 可觀察量，代表了一個由未來獲取到的值或事件組成的集合。

Observer:觀察者，是一個集合，由監聽Observable推送消息的一個或多個回調函數組成。

Subscription:訂閱過程，代表了Observable的執行過程，通常用來取消或者中斷Observable的執行過程。

Operators: 操作符是一些純函數，用來采用函數式編程風格處理集合，比如：map,filter,concat,flatMap等等。

Subject: Subject相當于事件觸發器(EventEmitter)，是向多個Observer廣播事件或推送值的唯一方法。

Schedulers: 調度者集中了派發器(dispatcher)控制并發，允許我們在使用類似setTimeout(),requestAnimationFrame或其他方法時，協調計算。

第一個例子

通常你會像下面這樣注冊事件偵聽器:

var button = document.querySelector("button");
button.addEventListener("click", () => console.log("Clicked!"));

使用RxJS，你可以創建一個observable，處理相同的邏輯:

var button = document.querySelector("button");
Rx.Observable.fromEvent(button, "click")
  .subscribe(() => console.log("Clicked!"));

純函數

采用純函數生產數據，使RxJS的能力很強，也可以減少代碼出錯的幾率。

通常，一個不純函數中的部分代碼可能會擾亂狀態，類似:

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`));

例子中的scan操作符類似于數組的reduce()方法。他將一個值傳遞給回調函數，之后的返回值則會作為一個輸入被傳遞給下一個時間點上的回調函數。

流

為了控制Observable實例中事件流，RxJS提供了各種各樣的操作符。

以下的例子展示了使用純js，實現至少間隔1秒發出一次點擊事件的代碼:

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();
  }
});

使用RxJS，可以這樣:

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

還有很多控制流的操作符，比如:filter,delay,debounceTime,take,takeUntil,distinct,distinctUntilChanged等等。

值

你可以改變Observable流中的值。

以下的例子，使用純js實現了獲取每次click事件時鼠標x坐標的值，并進行了計算:

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

使用RxJS，你可以這樣:

var button = document.querySelector("button");
Rx.Observable.fromEvent(button, "click")
  .throttleTime(1000)
  .map(event => event.clientX)
  .scan((count, clientX) => count + clientX, 0)
  .subscribe(count => console.log(count));

其他用來加工和生產值的操作符有:pluck,pairwise,sample等等。

云服務器 GPU云服務器 RxJS 引入rxjs Rxjs_Subject php01

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/83630.html

[譯]RxJS文檔04——Observer 觀察者

摘要：原文什么是觀察者是流推送數據的用戶。觀察者們就是一組函數的集合，監聽著每一個流推送出的不同類型的通知，包括和。如果沒有為某個類型的通知提供，流的執行過程仍然會照常進行，但是響應的通知將會被忽略，因為觀察者沒有提供相應的來接收。原文: http://reactivex.io/rxjs/manu... 什么是Observer？觀察者(Observer)是Observable流推送數據的...

xiaolinbang 2019-08-20 17:30 評論0 收藏0
[譯] RxJS文檔05——Subscription

摘要：原文什么是是一個對象，表示一種可被處置的資源，通常指代一個流的執行過程。在之前版本中的，被稱為可被處置的。本質是一個含有方法，用來釋放資源或者取消流執行的對象。原文: http://reactivex.io/rxjs/manu... 什么是Subscription? Subscription是一個對象，表示一種可被處置的資源，通常指代一個Observable流的執行過程。 Subsc...

walterrwu 2019-08-20 17:30 評論0 收藏0
[譯]RxJS文檔08——操作符分類

摘要：原文各種各樣的操作符按照不同的目的，分類幾個大類創建，變化，過濾，組合，廣播，錯誤處理，使用工具等等。原文:http://reactivex.io/rxjs/manu... 各種各樣的操作符按照不同的目的，分類幾個大類:創建，變化，過濾，組合，廣播（multicasting），錯誤處理，使用工具等等。以下的列表，按照分類羅列了全部的操作符：創建操作符 Creation Opera...

phoenixsky 2019-08-20 17:29 評論0 收藏0
[譯]RxJS文檔07——Operators 操作符

摘要：原文提供的操作符非常有用，盡管是基礎對象。我們稱這種現象為操作符訂閱鏈。靜態操作符是依賴于類的一組純函數，通常被用來從頭創建流。最常見的靜態操作符類型是所謂的創建操作符。貫穿本站的文檔，我們會廣泛的使用珠寶圖去解釋操作符是如何生效的。原文:http://reactivex.io/rxjs/manu... Operators RxJS提供的操作符非常有用，盡管Observable是基礎...

cooxer 2019-08-20 17:29 評論0 收藏0
[譯] RxJS文檔02—— Observable 可觀察量

摘要：原文可觀察量是一種能惰性推送的集合，他可以包含多個值。是一種惰性計算方式，會在迭代中同步的返回到無限個可能的話返回值。使用一種處理方法，最終可能會或可能不會返回一個值。無論是同步方式還是異步方式，都可以擇其一來傳遞返回值。原文：http://reactivex.io/rxjs/manu... Observable 可觀察量是一種能惰性推送的集合，他可以包含多個值。下面的表格對比了推送...

A Loity 2019-08-20 17:30 評論0 收藏0