尧图网站设计 尧图网站设计YAOTU DESIGN
ARTICLE DETAIL

资讯详情

深耕网站设计与一线实操的经验洞察。

RxJS v4 Complete 模块(rx.all)全解析:Schedulers、Disposables、Observable 与 Observer 的完整集合

RxJS v4 Complete 模块(rx.all)全解析:Schedulers、Disposables、Observable 与 Observer 的完整集合 RxJS v4 Complete 模块rx.all全解析Schedulers、Disposables、Observable 与 Observer 的完整集合【免费下载链接】RxJSThe Reactive Extensions for JavaScript项目地址: https://gitcode.com/gh_mirrors/rxj/RxJSRxJS Complete 模块是 Reactive Extensions for JavaScriptRxJS v4中功能最完整的发行形态它将 Schedulers、Disposables、Observable、Observer 等全部核心组件以及几乎全部 Observable 操作符打包进单一文件rx.all.js唯一刻意排除的是测试能力。阅读本文后你将掌握如何在 Node.js 与浏览器环境中通过 NPM 包rx、NuGet 包RxJS-All或直接引用的方式使用rx.all理解其完整的操作符清单与内部组成结构并能在实际项目中准确选用这一发行形态。一、Complete 模块是什么根据 doc/libraries/main/rx.complete.md 的定义RxJS 的完整功能集中在 complete 版 RxJS 文件中它包含大量核心组件包括Schedulers调度器控制任务在何种时间策略与执行环境中运行Disposables一次性资源管理订阅与资源的释放Observable与Observer推模型的推送式集合核心抽象以及覆盖创建、变换、过滤、组合、聚合、时间相关操作的全部 Observable 操作符。与文档中其他发行形态如 Main 模块相比Complete 模块是“全量集合”形态它既不拆分模块不同于 aggregates、async、binding 等按功能域拆分的独立包也不含任何 testing 能力即不包含 TestScheduler、ReactiveTest 等测试设施。它提供两种文件rx.all.js面向现代开发环境适用于 IE9 以上浏览器及 Node.js 等服务端环境rx.all.compat.js向后兼容版本面向不支持全部必需 ES5 特性的旧浏览器。二、获取与使用 rx.all1. 仓库内文件形态在当前仓库中Complete 模块的产物位于dist/目录文件说明dist/rx.all.js完整未压缩源码约 1.2 万行dist/rx.all.min.js压缩版dist/rx.all.compat.js兼容旧浏览器的完整版dist/rx.all.compat.min.js兼容版压缩产物ts/rx.all.d.tsTypeScript 类型声明ts/rx.all.es6.d.tsES6 风格的类型声明2. NPM 包rxComplete 模块通过 NPM 包rx发布。在 package.json 中可以确认包名rx当前仓库版本为4.1.0入口main指向 index.js而index.js依次加载dist/rx及dist/rx.aggregates、dist/rx.async、dist/rx.backpressure、dist/rx.binding、dist/rx.coincidence、dist/rx.experimental、dist/rx.joinpatterns、dist/rx.sorting、dist/rx.virtualtime、dist/rx.testing、dist/rx.time最终把合并后的Rx对象导出——也就是说NPM 安装的rx包在 Node.js 中会得到比单个rx.all.js更完整的运行时额外包含 testing 与 sorting 等能力browser字段将index.js映射为./dist/rx.all.js即浏览器打包工具如 webpack、browserify解析该包时会直接采用rx.all.jstypings指向./ts/rx.all.d.tsTypeScript 用户可直接获得完整类型提示。在 Node.js 中安装使用npm install rxvar Rx require(rx); var source Rx.Observable.range(0, 3) .map(function (x) { return x * 2; }) .filter(function (x) { return x 0; }); var subscription source.subscribe( function (x) { console.log(Next: x); }, function (err) { console.log(Error: err); }, function () { console.log(Completed); } ); // 输出Next: 2 / Next: 4 / Completed3. NuGet 包RxJS-All对于 .NET 项目可通过 NuGet 包RxJS-All引入。仓库中的 nuget/RxJS-All/RxJS-All.nuspec 揭示了其依赖结构——它本身是一个聚合包依赖以下 9 个原子包RxJS-Main、RxJS-Aggregates、RxJS-Binding、RxJS-Coincidence、RxJS-JoinPatterns、RxJS-Time、RxJS-Experimental、RxJS-Testing、RxJS-VirtualTime安装RxJS-All即一次性获得上述全部模块其打包内容同样包含rx.all.js、rx.all.compat.js、rx.all.d.ts与rx.all.es6.d.ts四个文件覆盖脚本使用与 TypeScript 使用两种场景。4. 浏览器中直接引用在浏览器中直接引入现代环境script srcdist/rx.all.js/script script var source Rx.Observable.fromEvent(document, click); var subscription source.subscribe(function (e) { console.log(clicked at ( e.clientX , e.clientY )); }); /script若需要兼容 IE8 等不支持完整 ES5 特性的旧浏览器则改用rx.all.compat.js。三、从源码看 rx.all 的组成结构1. UMD 包装与全局环境探测打开 dist/rx.all.js 的头部可以看到典型的 UMD 模式它先探测exports、module、global、self、window等环境对象计算出root然后在严格隔离的 IIFE 中构建Rx对象。Rx对象的初始结构包含internals、config含Promise配置项默认取root.Promise与helpersnoop、identity、defaultComparer、defaultError等工具函数。这套环境探测逻辑同时保证了 rx.all 在浏览器、Node.js、Web Worker 等环境中都能正确挂载。2. 模块化源码的注册清单仓库中的模块化源码 src/modular/index.js 与rx.all.js保持同源对应关系它通过Observable.addToObject与Observable.addToPrototype批量注册静态方法与原型方法例如静态方法create、from、fromArray、fromEvent、fromEventPattern、fromPromise、generate、interval、merge、never、of、range、timer、using、zip等原型方法buffer、bufferCount、bufferTime、combineLatest、debounce、delay、distinct、flatMap、groupBy、observeOn、publish、scan、switch、take、throttle、window等。同时该文件还定义了 RxJS 历史版本之间的别名关系例如selectMany flatMap、select map、where filterRxJS v4 别名以及mergeMap flatMap、switchMap flatMapLatest、publishReplay replayRxJS v5 别名——这正是文档清单中同名操作符可以互换使用如map/select、filter/where、do/tap的底层原因。四、Complete 模块包含的 Observable 静态方法rx.all内置了下列创建型与组合型静态方法Rx.Observable.*完整清单与文档一一对应点击名称可查看 API 细节方法API 文档ambambcasecasecatchcatchconcatconcatcreatecreatedeferdeferemptyemptyforforforkJoinforkJoinfromfromfromArrayfromArrayfromCallbackfromCallbackfromEventfromEventfromEventPatternfromEventPatternfromNodeCallbackfromNodeCallbackfromPromisefromPromisegenerategenerategenerateWithAbsoluteTimegenerateWithAbsoluteTimegenerateWithRelativeTimegenerateWithRelativeTimeififintervalintervaljustjustreturnmergemergemergeDelayErrormergeDelayErrorneverneverofofofArrayChangesofArrayChangesofObjectChangesofObjectChangesofWithSchedulerofWithScheduleronErrorResumeNextonErrorResumeNextpairspairsrangerangerepeatrepeatreturnreturnspawnspawnstartstartstartAsyncstartAsyncthrowthrowtimertimertoAsynctoAsyncusingusingwhenwhenwhilewhilewrapwrapzipzip其中值得注意的几类异步包装类fromCallback、fromNodeCallback、fromPromise、toAsync、start、startAsync负责把回调、Promise、同步函数桥接为 Observable 流事件类fromEvent、fromEventPattern将 DOM 事件或任意事件发射器转换为数据流生成类generate、generateWithAbsoluteTime、generateWithRelativeTime、range、interval、timer提供从初始状态迭代生成序列或按时间产生值的能力条件分支类case、if、while、for、when、onErrorResumeNext用于表达分支与循环式的数据流组合。五、Complete 模块包含的 Observable 实例方法实例方法observable.method(...)即通过原型链调用数量庞大覆盖变换、过滤、组合、聚合、时间与窗口等全部类别方法API 文档方法API 文档aggregatereducealleveryambambandandanysomeasObservableasObservableaverageaveragebufferbufferbufferWithCountbufferWithCountbufferWithTimebufferWithTimebufferWithTimeOrCountbufferWithTimeOrCountcatchcatchcombineLatestcombineLatestconcatconcatconcatAllconcatAllconcatMapconcatMapconnectconnectcontrolledcontrolledcountcountdebouncedebouncedefaultIfEmptydefaultIfEmptydelaydelaydelaySubscriptiondelaySubscriptiondematerializedematerializedistinctdistinctdistinctUntilChangeddistinctUntilChangeddododoOnNextdoOnNextdoOnErrordoOnErrordoOnCompleteddoOnCompleteddoWhiledoWhileelementAtelementAteveryeveryexpandexpandextendmanySelectfilterwherefinally/ensurefinallyfindfindfindIndexfindIndexfirstfirstflatMapselectManyflatMapFirstflatMapFirstflatMapLatestflatMapLatestflatMapObserverflatMapObserverflatMapWithMaxConcurrentflatMapWithMaxConcurrentforkJoinforkJoingroupBygroupBygroupByUntilgroupByUntilgroupJoingroupJoinignoreElementsignoreElementsincludesincludesisEmptyisEmptyjoinjoinlastlastlastIndexOflastIndexOfletletmanySelectmanySelectmapselectmaxmaxmaxBymaxBymergemergemergeAllmergeAllminminminByminBymulticastmulticastobserveOnobserveOnonErrorResumeNextonErrorResumeNextpairwisepairwisepartitionpartitionpausablepausablepausableBufferedpausableBufferedpluckpluckpublishpublishpublishLastpublishLastpublishValuepublishValueshareshareshareReplayshareReplayshareValueshareValuerefCountrefCountreducereducerepeatrepeatreplayreplayretryretryretryWhenretryWhensamplesamplescanscanselectselectselectConcatconcatMapselectManyselectManyselectManyObserverflatMapObserversequenceEqualsequenceEqualsinglesinglesingleInstancesingleInstanceskipskipskipLastskipLastskipLastWithTimeskipLastWithTimeskipUntilskipUntilskipUntilWithTimeskipUntilWithTimeskipWhileskipWhilesliceslicesomesomestartWithstartWithsubscribe/forEachsubscribesubscribeOnsubscribeOnsumsumswitch/switchLatestswitchswitchFirstswitchFirsttaketaketakeLasttakeLasttakeLastBuffertakeLastBuffertakeLastBufferWithTimetakeLastBufferWithTimetakeLastWithTimetakeLastWithTimetakeUntiltakeUntiltakeUntilWithTimetakeUntilWithTimetakeWhiletakeWhiletapdotapOnNextdoOnNexttapOnErrordoOnErrortapOnCompleteddoOnCompletedthrottlethrottletimeIntervaltimeIntervaltimeouttimeouttimestamptimestamptoArraytoArraywherewherewindowwindowwindowWithCountwindowWithCountwindowWithTimewindowWithTimewindowWithTimeOrCountwindowWithTimeOrCountwithLatestFromwithLatestFromzipzipzipIterablezipIterable阅读这份清单时可以注意到几个现象别名成对出现map/select、filter/where、flatMap/selectMany、do/tap等是同一种能力的不同命名前述 src/modular/index.js 中的别名注册即为此而来可按团队习惯任选其一聚合家族aggregate/reduce、count、sum、average、min/minBy、max/maxBy、everyall、someany、includes、isEmpty覆盖了统计与判定场景多播家族publish、publishLast、publishValue、share、shareReplay、shareValue、replay、multicast、refCount用于把一个上游流共享给多个订阅者时间与窗口家族buffer*、window*、debounce、throttle、sample、timeInterval、timestamp、delay、timeout等操作符与 Scheduler 协同工作。实例方法实战示例时间相关的聚合var Rx require(rx); // 每秒产生一个值2 秒窗口内聚合成数组 var source Rx.Observable.interval(1000) .windowWithTime(2000) .selectMany(function (w) { return w.toArray(); }) .take(2); source.subscribe(function (arr) { console.log(window: arr.join(,)); });六、Complete 模块包含的类除操作符外rx.all还内置了以下核心类可从Rx命名空间直接访问核心对象Rx.Observer观察者对象代表接收通知的一方与 Observable 一起构成观察者设计模式的推模型通知机制——Observable 是发送通知的提供者providerObserver 是接收通知的观察者observerRx.Notification通知对象封装onNext、onError、onCompleted三种通知类型配合materialize/dematerialize操作符可以在流中显式传递通知本身。Subjects主题对象兼具 Observable 与 Observer 双重身份Rx.AsyncSubject只在序列结束时发射最后一个值Rx.Subject可同时作为可观察源与观察者用于多播与作为事件总线。SchedulersRx.Scheduler调度器抽象决定任务在哪个执行环境、以何种时间策略运行rx.all中包含Rx.Scheduler基类及其实例如立即调度、当前线程调度、默认调度、超时调度等可配合observeOn、subscribeOn、delay、interval等操作符使用。Disposables资源管理Rx.CompositeDisposable组合多个一次性资源一次性全部释放Rx.Disposable一次性资源基类Rx.RefCountDisposable引用计数的一次性资源所有引用释放后才真正释放底层资源Rx.SerialDisposable串行一次性资源赋值新资源时自动释放旧资源Rx.SingleAssignmentDisposable只允许赋值一次的单一资源。在 src/modular/index.js 中可以看到这些类在模块化构建中的对应注册CompositeDisposable、Disposable、SerialDisposable、SingleAssignmentDisposable、BinaryDisposable、NAryDisposable等它们与dist/rx.all.js中导出的命名空间一致。七、测试与验证方式尽管 Complete 模块本身不包含 testing 能力仓库仍为其提供了现成的浏览器测试入口tests/rx.all.html针对rx.all.js的 QUnit 测试页面tests/rx.all.compat.html针对rx.all.compat.js的测试页面。对应的测试用例遍布 tests/observable/如 map/select、filter/where、reduce、merge、zip 等、tests/subjects/、tests/disposables/ 与 tests/concurrency/可用它们验证rx.all中各操作符与类在真实浏览器环境中的行为。另外仓库的 Gruntfile.js 承担构建与测试编排npm test即执行grunt负责从源码生成dist/下的各种发行产物含rx.all.js与rx.all.compat.js。八、与其他发行形态的边界RxJS v4 提供了多个发行形态理解它们的边界有助于正确选型Main 模块rx/rx.compat核心功能见 doc/libraries/main/rx.md包含 Schedulers、Disposables、Observable、Observer 与基础操作符Complete 模块rx.all/rx.all.compat在 Main 基础上并入 aggregates、async、backpressure、binding、coincidence、joinpatterns、time、virtualtime、experimental 等全部能力是单文件场景下的全家桶测试相关模块如 rx.testing提供 TestScheduler、ReactiveTest 等设施不属于 Complete 模块的范畴——这正是 rx.complete.md 明确指出的 omits any testing capabilities若在 Node.js 中通过 NPM 包rx引入则 index.js 会加载包括 testing 在内的全部 dist 模块得到比浏览器rx.all.js更完整的运行时若通过打包工具使用浏览器构建browser字段会指向dist/rx.all.js。因此选型建议是浏览器单文件引入或追求最小依赖时使用rx.all.js或兼容版rx.all.compat.jsNode.js 服务端直接npm install rx后require(rx)需要测试调度器编写单元测试时则应额外引入 testing 模块如通过 NPM 包内的dist/rx.testing或 RxJS-Testing 对应产物而不是依赖rx.all本身。【免费下载链接】RxJSThe Reactive Extensions for JavaScript项目地址: https://gitcode.com/gh_mirrors/rxj/RxJS创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表