成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

rxjs5升級 rx.js6 中的函數(shù)式深入

HelKyle / 601人閱讀

摘要:最近組內(nèi)的在做的升級,這當(dāng)中也涉及到了的升級。所以這也是今天要說的一個重點,的實現(xiàn),是這次版本升級最根本的地方。

最近組內(nèi)的angular在做4->6的升級,這當(dāng)中也涉及到了rxjs的升級。rxjs升級guide鏈接以下是記錄的一些rxjs的升級小tips

6版本有非常多的break points,總結(jié)下來為以下三點:

比較多的引用路徑變更

一些方法,函數(shù)增棄

chainable==>pipeable

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

其實1和2都有點為第三點服務(wù)的意思,我們先簡單說下1和2。引用路徑的變更,意味著源碼目錄結(jié)構(gòu)的調(diào)整(這些大家可以下載源碼,自行看下);同時,原來的rx也采用了和underscore、lodash一樣的導(dǎo)出方式,在寫法上,滿足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導(dǎo)出了一個核心對象Observable以及若干的附屬類型對象,然后方法(自有方法(create、subscribe等),以及一些常用的操作符(map、fileter等))定義在這些對象的prototype上,所以這種定義方式搞起鏈式調(diào)用就666,這種實現(xiàn)不影響其本質(zhì)上的函數(shù)式,但在寫法上其實是面向?qū)ο蟮膫魏瘮?shù)式,但但是奇奇怪怪的,老是搞對象是什么鬼,說好的FP呢。

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

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的同學(xué)會發(fā)現(xiàn),這個pipe其實是一個從左向右執(zhí)行的compose,只不過它接受的第一個參數(shù)是this,即當(dāng)前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,在寫法上是一次更加徹底的函數(shù)式實踐。

當(dāng)然這種方法->函數(shù)的更改,還有一些更大的好處:

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

更好的用戶自定義:更安全(避免對象prototype定義的全局污染),更方便

寫法上更函函數(shù)式:方便用戶進行函數(shù)的compose,curry操作,呼應(yīng)2的更方便的自定義

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

rx團隊的說明

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

文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址:http://systransis.cn/yun/96519.html

相關(guān)文章

  • rxjs5.x】Transformation操作符

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

    isaced 評論0 收藏0
  • rxjs5.x】filter操作符

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

    Forelax 評論0 收藏0
  • 從命令到響應(yīng)(四)

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

    jaysun 評論0 收藏0
  • 2017-06-27 前端日報

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

    Eidesen 評論0 收藏0
  • 專訪 | Angel團隊負責(zé)人黃明:歷時半年,騰訊Angel為了開源都經(jīng)歷了些什么?

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

    William_Sang 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<