[譯]RxJS文檔07——Operators 操作符

cooxer 發布于2019-08-20 17:29 / 3535人閱讀

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

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

Operators

RxJS提供的操作符非常有用，盡管Observable是基礎對象。
操作符是聲明式編程中將復雜的異步代碼轉變為簡單的代碼組合的重要措施。

什么是操作符 (operator)？

操作符是Observable類型的一組方法，比如像:.map(...),.filter(...),.merge(...),等等。當方法被調用的時候，他們不會更改已經存在的Observable流實例，而是返回一個新的Observable流的實例，這個新的對象中的訂閱邏輯則是建立在第一個Observable流之上的。

一個Operator能夠在當前的Observable流基礎上創建一個新的Observable流。這是一個純粹的新處理過程：之前的Observable保持不變。

操作符本質上是能夠接收一個Observable流作為輸入，并返回一個Observable流作為輸出的純函數。
訂閱輸出的Observable流也會同時訂閱輸入的Observable流。
在下面的例子中，我們創建了一個自定義的操作符函數可以將所有輸入的值都乘以10，然后輸出：

function multiplyByTen(input) {
  var output = Rx.Observable.create(function subscribe(observer) {
    input.subscribe({
      next: (v) => observer.next(10 * v),
      error: (err) => observer.error(err),
      complete: () => observer.complete()
    });
  });
  return output;
}

var input = Rx.Observable.from([1, 2, 3, 4]);
var output = multiplyByTen(input);
output.subscribe(x => console.log(x));

輸出為:

注意以上的例子中，訂閱輸出流也會同時訂閱輸入流的情況。我們稱這種現象為：“操作符訂閱鏈”。

實例操作符 vs 靜態操作符

什么是實例操作符？ 通常提及操作符，我們假定指的都是實例操作符，他們是Observable流的實例方法。
例如，如果multiplyByTen是正式的實例操作符，他將會是這樣的：

Rx.Observable.prototype.multiplyByTen = function multiplyByTen() {
  var input = this;
  return Rx.Observable.create(function subscribe(observer) {
    input.subscribe({
      next: (v) => observer.next(10 * v),
      error: (err) => observer.error(err),
      complete: () => observer.complete()
    });
  });
}

實例操作符本質是一個函數，他在內部使用this關鍵字指代Observable輸入流。

注意輸入Observable流已經不再作為函數的參數，它被假定為this所指向的對象。下面是我們如何使用實例操作符：

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

observable.subscribe(x => console.log(x));

什么是靜態操作符？ 有別于實例操作符，靜態操作符直接是Observable類的方法。靜態操作符函數內部不再使用this，它完全依賴函數的參數。

靜態操作符是依賴于Observable類的一組純函數，通常被用來從頭創建Observable流。

最常見的靜態操作符類型是所謂的創建操作符。不同于將輸入流轉換成輸出流的操作符，他們不用接收Observable類型的參數，而是接收諸如number類型的參數，就可以創建一道數據流。

一個經典的例子是使用靜態操作符interval()。他接收一個數字(而不是Observable流)作為輸入參數，之后產生一道Observable流作為輸出：

var observable = Rx.Observable.interval(1000 /* number of milliseconds */);

另一個創建操作符的例子是create()，在之前的例子里已經用了很多次。你可以從這里查看所有的創建操作符。

然而，靜態操作符們并不僅限于簡單創建。一些組合操作符也是靜態的，例如merage,combineLates,concat等等。他們可以整合多道輸入的Observable流，所以也是非常有意義的靜態操作符。

var observable1 = Rx.Observable.interval(1000);
var observable2 = Rx.Observable.interval(400);

var merged = Rx.Observable.merge(observable1, observable2);

珠寶圖 Marble diagrams

為了更好的展示操作符是如何工作的，只有文字性的解釋是不夠的。很多操作符依賴于時間，例如他們可能會使用延遲，取樣，節流，又或者去抖等等方式。
畫一些圖表能很好的說明這些過程。珠寶圖就是用來展示這些的圖表，他包含輸入Observable流，操作符和相關參數，還有輸出流。

在珠寶圖中，時間的流逝被標為從左到右的水平線，線上的每個值(“珠寶”)代表了Observable流在執行過程中發出的值。

下圖你可以看到對珠寶的詳解。

貫穿本站的文檔，我們會廣泛的使用珠寶圖去解釋操作符是如何生效的。在別的場景下他們或許同樣有用，例如在whiteboard上或者在單元測試中(作為ASCII圖表)。

GPU云服務器云服務器系統操作文檔 js文檔操作 NET文檔操作 java 文檔操作

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

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

[譯]RxJS文檔08——操作符分類

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

phoenixsky 2019-08-20 17:29 評論0 收藏0
[譯]RxJS文檔01——介紹

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

BlackHole1 2019-08-20 17:30 評論0 收藏0
RxJS 6有哪些新變化？

摘要：有哪些新變化于年月日正式發布，為開發人員帶來了一些令人興奮的增補和改進。不要移除包，直到你將所有的鏈式操作修改為管道操作符。 RxJS 6有哪些新變化？ RxJs 6于2018年4月24日正式發布，為開發人員帶來了一些令人興奮的增補和改進。Ben Lesh, rxJS核心開發成員，強調： RxJS 6在擁有更小API的同時，帶來了更整潔的引入方式提供一個npm包，該package可...

LeanCloud 2019-08-22 17:24 評論0 收藏0
通俗的方式理解RxJS

摘要：到底是什么先上代碼輸出這里可以把想象成一個函數，這意味著你每次調用都會導致傳入里的回調函數重新執行一次調用的方式為相當于。接收函數返回值的方式也從改為通過傳入回調函數的方式獲取。具體看代碼運行結果如上的第一個回調函數里的結構是推薦的結構。通俗的方式理解Rx.js 序言今早看民工叔的文章的時候，發現對Rxjs所知甚少，于是去官方看了下教程，整理出一些東西，寫成此文。Rxjs據...

jzzlee 2019-08-20 14:31 評論0 收藏0
[譯]RxJS文檔04——Observer 觀察者

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

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