RxJS(Reactive Extensions for JavaScript)是一个库,它基于 Observable 模式,用于处理异步操作和事件处理。RxJS 5 是RxJS的最新版本,这个版本从4升级到5的变化非常大。
在RxJS 5中,有很多新增的功能,使得它在异步操作和事件处理方面变得更具强大,同时它在性能和模块化方面也有很大的提升。在这篇文章中,我将列出RxJS 4到RxJS 5的整个快速升级列表,帮助读者更好地理解RxJS 5的变化和功能的新增。
1. 引用
在RxJS 4中,引用的方式使用了AMD,CommonJS和全局(直接从cdn中加载Rx.js)。然而,在RxJS 5中,除了全局方式对应的Rx.Observable外,其余的方法和类默认是使用ES6中的模块加载方式。为了解决旧有的代码与RxJS 5的兼容性,可以使用一些工具进行转换。
例如,使用串联转换工具(Browserify, Webpack)或打包工具(Rollup.js, Webpack 2.x)可以将RxJS 5的默认导出(例如Observable、Subject)与RxJS4对应的命名空间(例如Rx.Observable)匹配。
2. 命令式的操作符和链式操作符
在RxJS 4中,我们可以使用命令式的操作符和链式操作符。
在RxJS 5中,操作符名称由驼峰式改为了小写字母,例如,在RxJS 4中,我们可以使用操作符"mergeAll",在RxJS 5中,这个操作符改为了 "mergeall”。
另外,RxJS 5中的操作符使用了链式操作符的方式,不再使用命令式的操作符,例如:
-- -------------------- ---- ------- -- ---- - - ------ ------------------- -- ------ -- - - -- --------- -- - - -- ------------ -- ---------------- -- ---- - - ----- ------------------- -- ------ -- - - -- --------- -- - - -- ------------ -- ----------------
3. 少数操作符的变化
在RxJS 4中,有三个操作符: "finally","catch"和"throw"。这些操作符在RxJS 5中发生了变化:
- "finally"-- renames为“_finally”
- "catch"-- 重命名为“_catch”
- "throw"-- 重命名为“_throw”
同时,RxJS 5新增了一系列可迭代操作符函数,包括 "for","of","from","bindCallback"等等
4. 错误处理的变化
在RxJS 4中,错误处理使用 catch 操作符来捕捉异常并输出错误信息。然而,在RxJS 5中,错误处理采用的是 observable 中的 catch operator。这表示当 observable处理出错时,它会生成一个新的 observable 并返回一个新observable。这个新observable会发出一个错误信息,例如:
-- -------------------- ---- ------- --- ------ - -------------------------- -- - ------------------------ --- --- -------- - ----------------- -- - ------------------ ------- -- ----- -- ------- ---------- ---- ---------- ----------- ------ --------------------------- --- ---------------------- -- ----------------- --- -- ------------------
5. 运算符的变化
在RxJS 4中,运算符是作为实例方法绑定在Observable类对象的原型上。例如:
Observable.prototype.map = function (mapFn) { // ... }
然而,在RxJS 5中,运算符被抽离成单独的函数,以便于能够遵循被引用的函数(Function Referencing),同时提供更好的可复用性。这样更符合函数式编程的设计原则。
let map$ = map(mapFn); let result$ = map$(source$);
结论
在RxJS 5中,运算符和操作符发生了巨大的变化,一些操作符被重命名,一些被重新设计。RxJS 5新增的多个强大特性使得异步操作和事件处理更加容易和有趣。了解这些变化可以让你更好地理解和使用RxJS 5。
同时,RxJS 5也解决了一些RxJS 4中的问题和隐藏的特性。从RxJS 4到RxJS 5的变化是巨大的,但它为我们带来了更好的灵活性和可用性,使得工作更加容易。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/66f60573c5c563ced57eb850