資訊專欄INFORMATION COLUMN
摘要：有哪些新變化于年月日正式發(fā)布，為開發(fā)人員帶來了一些令人興奮的增補(bǔ)和改進(jìn)。不要移除包，直到你將所有的鏈?zhǔn)讲僮餍薷臑楣艿啦僮鞣?/p>
RxJS 6有哪些新變化？
RxJs 6于2018年4月24日正式發(fā)布，為開發(fā)人員帶來了一些令人興奮的增補(bǔ)和改進(jìn)。Ben Lesh, rxJS核心開發(fā)成員，強(qiáng)調(diào)：
RxJS 6在擁有更小API的同時(shí)，帶來了更整潔的引入方式
提供一個(gè)npm包，該package可以處理RxJS的向后兼容性，使得開發(fā)人員可以在不更改代碼的情況下進(jìn)行更新，同時(shí)還可以幫助TypeScript代碼自動(dòng)遷移。
RxJs 6這些新的改動(dòng)為開發(fā)人員提供了以下三方面的優(yōu)化：模塊化方面的改進(jìn)、性能提升、調(diào)試更方便。RxJs團(tuán)隊(duì)盡力保持新版本的向后兼容性，但是為了減少RxJs的API數(shù)量，還是引入了一些重大修改。
下面讓我們一起來看一下RxJs團(tuán)隊(duì)在新版本中引入了哪些修改。
RxJS 6的向后兼容性為了便捷地從RxJS 5遷移到RxJS 6，RxJS團(tuán)隊(duì)發(fā)布了一個(gè)名為rxjs-compat的兄弟軟件包。該軟件包在v6和v5的API之間創(chuàng)建了一個(gè)兼容層。
RxJs團(tuán)隊(duì)建議開發(fā)人員通過安裝^6.0.0版本的rxjs和rxjs-compat包來升級(jí)現(xiàn)有應(yīng)用:
npm install rxjs@6 rxjs-compat@6 --save
此包允許您在升級(jí)RxJS 6的同時(shí)繼續(xù)運(yùn)行現(xiàn)有代碼庫，而不會(huì)出現(xiàn)問題。他支持在RxJs 6中移除掉的功能。
安裝rxjs-compat會(huì)導(dǎo)致打包后代碼包體積的增加，如果你使用的是4.0.0版本以下的Webpack，該影響會(huì)被放大。
因此建議升級(jí)完成后將rxjs-compat移除。
只有兩個(gè)重大修改在rxjs-compat中未覆蓋：
TypeScript原型操作符在極少數(shù)情況下，您的代碼庫定義了它自己的TypeScript原型操作符并修改了Observable命名空間。該情況下，您需要更新你的操作符相關(guān)代碼才能使TypeScript正常編譯。
在版本發(fā)布說明中，用戶自定義的原型操作符可按如下方式創(chuàng)建：
Observable.prototype.userDefined = () => {
return new Observable((subscriber) => {
this.subscribe({
next(value) { subscriber.next(value); },
error(err) { subscriber.error(err); },
complete() { subscriber.complete(); },
});
});
});
source$.userDefined().subscribe();
為編譯該類型的自定義操作符，需要做如下修改：
const userDefined =同步錯(cuò)誤處理() => (source: Observable ) => new Observable ((subscriber) => { this.subscribe({ next(value) { subscriber.next(value); }, error(err) { subscriber.error(err); }, complete() { subscriber.complete(); }, }); }); }); source$.pipe( userDefined(), )
不再支持在try / catch塊內(nèi)調(diào)用Observable.subscribe()。使用用Observable.subscribe()方法中的錯(cuò)誤回調(diào)方法替換原先的try / catch塊來完成的異步錯(cuò)誤的處理。
示例如下：
// deprecated
try {
source$.subscribe(nextFn, undefined, completeFn);
} catch (err) {
handleError(err);
}
// use instead
source$.subscribe(nextFn, handleError, completeFn);
現(xiàn)在在Observable.subscribe()中必須定義一個(gè)錯(cuò)誤回調(diào)方法來異步處理錯(cuò)誤。
刪除RxJs兼容層前需要做的修改如上所訴，rxjs-compat提供了V5與v6API間的臨時(shí)兼容層，實(shí)質(zhì)上rxjs-compat為您的代碼庫提供了所需的v5版本功能，使得您可以逐步將您的代碼庫升級(jí)到v6版本。為了完成升級(jí)并移除rxjs-compat依賴，您的代碼庫需要重構(gòu)并停止使用v5版本中的如下功能：
修改import路徑建議TypeScript開發(fā)人員使用rxjs-tslint來重構(gòu)import路徑。
RxJS團(tuán)隊(duì)設(shè)計(jì)了以下規(guī)則來幫助JavaScript開發(fā)人員重構(gòu)import路徑：
rxjs: 包含創(chuàng)建方法，類型，調(diào)度程序和工具庫。
import { Observable, Subject, asapScheduler, pipe, of, from, interval, merge, fromEvent } from "rxjs";
rxjs/operators: 包含所有的管道操作符
import { map, filter, scan } from "rxjs/operators";
rxjs/webSocket: 包含websocket subject實(shí)現(xiàn).
import { webSocket } from "rxjs/webSocket";
rxjs/ajax: 包含Rx ajax實(shí)現(xiàn).
import { ajax } from "rxjs/ajax";
rxjs/testing: 包含RxJS的測試工具庫.
import { TestScheduler } from "rxjs/testing";
以下是一項(xiàng)小調(diào)查：您是否有常識(shí)使用rxjs-tslint升級(jí)您的應(yīng)用程序？
使用新的管道操作符語法替換舊有的鏈?zhǔn)讲僮?。上一個(gè)操作符方法的結(jié)果會(huì)被傳遞到下一個(gè)操作符方法中。
不要移除rxjs-compat包，直到你將所有的鏈?zhǔn)讲僮餍薷臑楣艿啦僮鞣?。如果您使用TypeScript, ts-lint會(huì)在某種程度上自動(dòng)執(zhí)行此項(xiàng)重構(gòu)。
Ben Lesh在ng-conf 2018上解釋了為什么我們應(yīng)該使用管道操作符。
請(qǐng)按照如下步驟將您的鏈?zhǔn)讲僮魈鎿Q為管道操作：
從rxjs-operators中引入您需要的操作符
注意：由于與Javascript保留字沖突，以下運(yùn)算符名字做了修改：do -> tap, catch ->
catchError, switch -> switchAll, finally -> finalize
import { map, filter, catchError, mergeMap } from "rxjs/operators";
使用pipe()包裹所有的操作符方法。確保所有操作符間的.被移除，轉(zhuǎn)而使用,連接。記?。。?！有些操作符的名稱變了?。?！
以下為升級(jí)示例：
// an operator chain
source
.map(x => x + x)
.mergeMap(n => of(n + 1, n + 2)
.filter(x => x % 1 == 0)
.scan((acc, x) => acc + x, 0)
)
.catch(err => of("error found"))
.subscribe(printResult);
// must be updated to a pipe flow
source.pipe(
map(x => x + x),
mergeMap(n => of(n + 1, n + 2).pipe(
filter(x => x % 1 == 0),
scan((acc, x) => acc + x, 0),
)),
catchError(err => of("error found")),
).subscribe(printResult);
注意我們?cè)谝陨洗a中嵌套使用了pipe()。
使用函數(shù)而不是類使用函數(shù)而不是類來操作可觀察對(duì)象(Observables)。所有的Observable類已被移除。他們的功能被新舊操作符及函數(shù)替代。這些替代品的功能與之前的類功能一模一樣。
示例如下：
// removed ArrayObservable.create(myArray) // use instead from(myArray) // you may also use new operator fromArray().
有關(guān)替換v5類為v6函數(shù)的完整列表，請(qǐng)查看RxJS文檔。
特殊情況ConnectableObservable在v6中不能直接使用，要訪問它，請(qǐng)使用操作符multicast，publish，publishReplay和publishLast。
SubscribeOnObservable在v6中不能直接使用，要訪問它，請(qǐng)使用操作符subscribeOn
移除resultSelectorResult Selectors是一項(xiàng)沒有被廣泛使用甚至沒有文檔說明的RxJs特性，同時(shí)Result Selectors嚴(yán)重的增加了RxJs代碼庫的體積，因此RxJs團(tuán)隊(duì)決定棄用或刪除他。
對(duì)于使用到該功能的開發(fā)人員，他們需要將esultSelector參數(shù)替換為外部代碼。
對(duì)于first(), last()這兩個(gè)函數(shù)，這些參數(shù)已被移除，在刪除rxjs-compat之前務(wù)必升級(jí)代碼。
對(duì)于其他擁有resultSelector參數(shù)的函數(shù)，如mapping操作符，該參數(shù)已被棄用，并
以其他方式重寫。如果您移除rxjs-compat，這些函數(shù)仍可正常工作，但是RxJs團(tuán)隊(duì)聲明他們必須在v7版本發(fā)布之前將其移除。
針對(duì)該情況的更多詳情，請(qǐng)查閱RxJs文檔
其他RxJs6棄用 Observable.if and Observable.throwObservable.if已被iif()取代，Observable.throw已被throwError()取代。您可使用rxjs-tslint將這些廢棄的成員方法修改為函數(shù)調(diào)用。
代碼示例如下：
OBSERVABLE.IF > IIF()// deprecated Observable.if(test, a$, b$); // use instead iif(test, a$, b$);OBSERVABLE.ERROR > THROWERROR()
// deprecated Observable.throw(new Error()); //use instead throwError(new Error());已棄用的方法
根據(jù)遷移指南，以下方法已被棄用或重構(gòu)：
mergeimport { merge } from "rxjs/operators";
a$.pipe(merge(b$, c$));
// becomes
import { merge } from "rxjs";
merge(a$, b$, c$);
concat
import { concat } from "rxjs/operators";
a$.pipe(concat(b$, c$));
// becomes
import { concat } from "rxjs";
concat(a$, b$, c$);
combineLatest
import { combineLatest } from "rxjs/operators";
a$.pipe(combineLatest(b$, c$));
// becomes
import { combineLatest } from "rxjs";
combineLatest(a$, b$, c$);
race
import { race } from "rxjs/operators";
a$.pipe(race(b$, c$));
// becomes
import { race } from "rxjs";
race(a$, b$, c$);
zip
import { zip } from "rxjs/operators";
a$.pipe(zip(b$, c$));
// becomes
import { zip } from "rxjs";
zip(a$, b$, c$);
總結(jié)
RxJS 6帶來了一些重大改變，但是通過添加rxjs-compat軟件包可以緩解這一問題，該軟件包允許您在保持v5代碼運(yùn)行的同時(shí)逐漸遷移。對(duì)于Typescript用戶，其他中包括大多數(shù)Angular開發(fā)人員，tslint提供了大量的自動(dòng)重構(gòu)功能，使轉(zhuǎn)換變得更加簡單。
任何升級(jí)與代碼修改都會(huì)引入一些bug到代碼庫中。因此請(qǐng)務(wù)必測試您的功能以確保您的終端用戶最終接受到相同的質(zhì)量體驗(yàn)。
視頻：RxJS 6詳細(xì)介紹 by Ben Lesh
原文鏈接
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/95141.html
摘要：以下簡單介紹的重大變化。狀態(tài)轉(zhuǎn)交及對(duì)的支持這樣更便于在服務(wù)端和客戶之間共享應(yīng)用狀態(tài)。狀態(tài)轉(zhuǎn)交的相關(guān)文檔幾周后會(huì)發(fā)布。我們刪除很多以前廢棄的如，也公布了一些新的廢棄項(xiàng)。以上指南會(huì)詳細(xì)介紹這些變更。已知問題當(dāng)前已知與相關(guān)的問題。 我們很高興地宣布Angular 5.0.0——五角形甜甜圈發(fā)布啦！這又是一個(gè)主版本，包含新功能并修復(fù)了很多bug。它再次體現(xiàn)了我們把Angular做得更小、更快、...
摘要：以下簡單介紹的重大變化。狀態(tài)轉(zhuǎn)交及對(duì)的支持這樣更便于在服務(wù)端和客戶之間共享應(yīng)用狀態(tài)。狀態(tài)轉(zhuǎn)交的相關(guān)文檔幾周后會(huì)發(fā)布。我們刪除很多以前廢棄的如，也公布了一些新的廢棄項(xiàng)。以上指南會(huì)詳細(xì)介紹這些變更。已知問題當(dāng)前已知與相關(guān)的問題。 我們很高興地宣布Angular 5.0.0——五角形甜甜圈發(fā)布啦！這又是一個(gè)主版本，包含新功能并修復(fù)了很多bug。它再次體現(xiàn)了我們把Angular做得更小、更快、...
摘要：響應(yīng)式編程具有很強(qiáng)的表現(xiàn)力，舉個(gè)例子來說，限制鼠標(biāo)重復(fù)點(diǎn)擊的例子。在響應(yīng)式編程中，我把鼠標(biāo)點(diǎn)擊事件作為一個(gè)我們可以查詢和操作的持續(xù)的流事件。這在響應(yīng)式編程中尤其重要，因?yàn)槲覀冸S著時(shí)間變換會(huì)產(chǎn)生很多狀態(tài)片段。迭代器模式的另一主要部分來自模式。 Rxjs 響應(yīng)式編程-第一章：響應(yīng)式Rxjs 響應(yīng)式編程-第二章：序列的深入研究Rxjs 響應(yīng)式編程-第三章: 構(gòu)建并發(fā)程序Rxjs 響應(yīng)式編程-...
摘要：年前端有哪些領(lǐng)域，技術(shù)值得關(guān)注，哪些技術(shù)會(huì)興起，哪些技術(shù)會(huì)沒落。自從谷歌提出后，就持續(xù)的獲得了業(yè)界的關(guān)注，熱度可見一斑。就在今年，谷歌也宣布將獲得與安卓原生應(yīng)用同等的待遇與權(quán)限。但是無論都值得關(guān)注。 1.前言 2017悄然過去，2018已經(jīng)來到。人在進(jìn)步，技術(shù)在發(fā)展。2018年前端有哪些領(lǐng)域，技術(shù)值得關(guān)注，哪些技術(shù)會(huì)興起，哪些技術(shù)會(huì)沒落。下面就我個(gè)人的判斷進(jìn)行一個(gè)預(yù)測判斷，希望能對(duì)大家...
閱讀 2678·2021-11-25 09:43
閱讀 2590·2021-11-22 09:34
閱讀 2861·2021-11-12 10:34
閱讀 1447·2021-10-20 13:46
閱讀 2308·2019-08-30 13:21
閱讀 938·2019-08-30 11:21
閱讀 492·2019-08-30 11:20
閱讀 2196·2019-08-29 17:20
