rxjs5升級 rx.js6 中的函數式深入

HelKyle 發布于2019-08-23 10:37 / 600人閱讀

摘要：最近組內的在做的升級，這當中也涉及到了的升級。所以這也是今天要說的一個重點，的實現，是這次版本升級最根本的地方。

最近組內的angular在做4->6的升級，這當中也涉及到了rxjs的升級。rxjs升級guide鏈接以下是記錄的一些rxjs的升級小tips

6版本有非常多的break points，總結下來為以下三點：

比較多的引用路徑變更

一些方法，函數增棄

chainable==>pipeable

以上幾點，在具體實踐上，1和2根據api,以及rx提供的升級檢查工具，都能比較愉快的完成，但比較有意義的第3點，作為一個對函數式編程感興趣的前端碼農，當然要研究一下原委。

其實1和2都有點為第三點服務的意思，我們先簡單說下1和2。引用路徑的變更，意味著源碼目錄結構的調整（這些大家可以下載源碼，自行看下）；同時，原來的rx也采用了和underscore、lodash一樣的導出方式，在寫法上，滿足chainable，所以用rx5時，我們是這樣寫的：

 var Rx = require("rxjs");
     const Observable = Rx.Observable;
     Observable.range(1,10)
         .filter(x => x % 2 === 0)
         .map(x => x + x)
         .subscribe(x=> console.log(x))

v5的rx導出了一個核心對象Observable以及若干的附屬類型對象，然后方法(自有方法(create、subscribe等)，以及一些常用的操作符(map、fileter等))定義在這些對象的prototype上，所以這種定義方式搞起鏈式調用就666，這種實現不影響其本質上的函數式，但在寫法上其實是面向對象的偽函數式，但但是奇奇怪怪的，老是搞對象是什么鬼，說好的FP呢。

所以這也是今天要說的一個重點，chainable-->pipeable的實現，是rx這次版本升級最根本的地方。在內部實現上，把原有的操作符都函數化，同時在Observable上新增了pipe方法，以下是pipe.ts中的pipe實現

export function pipe(...fns: Array>): UnaryFunction {
  return pipeFromArray(fns);
}

/* @internal */
export function pipeFromArray(fns: Array>): UnaryFunction {
  if (!fns) {
    return noop as UnaryFunction;
  }

  if (fns.length === 1) {
    return fns[0];
  }

  return function piped(input: T): R {
    return fns.reduce((prev: any, fn: UnaryFunction) => fn(prev), input);
  };
}

熟悉FP的同學會發現，這個pipe其實是一個從左向右執行的compose，只不過它接受的第一個參數是this，即當前Observable實例，所以我們第一個例子在v6中得這么寫：

import { range } from "rxjs/observable/range";
import { map, filter } from "rxjs/operators";


range(0, 10).pipe(
    filter(x => x % 2 === 0),
    map(x => x + x)
).subscribe(x=> console.log(x))

上例pipe做的事情等同于：mapFn(filterFn(range(0,10)))

chainable==>到pipeable，在寫法上是一次更加徹底的函數式實踐。

當然這種方法->函數的更改，還有一些更大的好處：

打包時的按需引入，tree-shake

更好的用戶自定義：更安全（避免對象prototype定義的全局污染），更方便

寫法上更函函數式：方便用戶進行函數的compose,curry操作，呼應2的更方便的自定義

其它更詳盡的點，可參考:

rx團隊的說明

原文來自：https://zhuanlan.zhihu.com/p/...

GPU云服務器云服務器聲明式函數函數式組件函數式編程 python函數式

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

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

【rxjs5.x】Transformation操作符

摘要：對對象發出的每個值，使用指定的函數，進行映射處理。示例圖以上代碼運行后，控制臺的輸出結果緩沖源對象已發出的值，直到大小達到給定的最大。該操作符也會先處理前一個對象，在處理下一個對象。 map 對 Observable 對象發出的每個值，使用指定的 project 函數，進行映射處理。 var source = Rx.Observable.interval(1000); var newe...

isaced 2019-08-22 16:14 評論0 收藏0
【rxjs5.x】filter操作符

摘要：操作符防抖動，只有當另一個發射值時，才取源的最新數據進行發射，其他數據取消發射。輸出從源數據集的第一項開始進行發射，直到另一個開始發射第一個值時，源停止發射值。 rxjs5.x filter操作符api debounce 防抖動，只有當另一個Observable發射值時，才取源Obervable的最新數據進行發射，其他數據取消發射。 // 每次點擊，且當計時器的最新值未被發射時，才從計...

Forelax 2019-08-26 11:45 評論0 收藏0
從命令式到響應式（四）

摘要：使用的操作符這條從左到右的橫線代表經過操作符轉換后的輸出流。返回值通過判定函數檢測的值組成的流。返回值持續發出輸入流上的值，直到通知流上發出值為止。上期介紹過了rxjs中的三大件，Observable，subscription，subject，但是在開發過程我們最常接觸到的東西非操作符莫屬。比如上期代碼中曾出現過的from就是一個操作符。rxjs中的操作符大致上可以分為幾類，創建類，...

jaysun 2019-08-23 11:39 評論0 收藏0
2017-06-27 前端日報

摘要：前端日報精選漫談函數式編程一十年蹤跡的博客前端每周清單的優勢與劣勢有望超越在嵌入式及物聯網的應用現狀進階系列高階組件詳解一前端之路譯如何充分利用控制臺掘金程序猿升級攻略眾成翻譯中文譯如何充分利用控制臺掘金前端從強制開啟壓縮探 2017-06-27 前端日報精選漫談 JS 函數式編程（一） - 十年蹤跡的博客前端每周清單： Vue的優勢與劣勢；Node.js有望超越Java；JS在嵌...

Eidesen 2019-08-20 17:35 評論0 收藏0
專訪 | Angel團隊負責人黃明：歷時半年，騰訊Angel為了開源都經歷了些什么？

摘要：詳見騰訊正式版發布基于與的機器學習高性能計算平臺在談及新一代平臺時，黃明表示，是此次平臺升級的一大亮點，而只是生態圈的第一個成員。對此，黃明表示，在的開發過程中，我們一直都是在同和對標性能。機器之心原創作者：高靜宜 2017 年 6 月 16 日，騰訊新一代高性能計算平臺 Angel 在 Github 上低調開源。開源兩周，這個項目在 Github 上持續得到關注，截至目前為止，已...

William_Sang 2019-08-20 17:40 評論0 收藏0