随着Inoic Beta6的发布[1],对其中的一些技术细节, 重点是ReactiveX库,Angular2中的Observable,Ionic2中的Provider(或Service)、Promise做了初步的分析。
1. 如何查看app使用的是哪一个Ionic版本[1]
方法1: 查看app使用的ionic库版本:npm view ionic-angular version
方法2:查看app根目录下的package.json文件,可以看到版本依赖关系,例如:
"ionic-angular": "2.0.0-beta.6"
2.Components 与 Pages有哪些差异
参照[2,3],pages是navigationcomponent(in the context of navigation)中的decorators。
3. ReactiveX库中的Observable
一个Observer向一个Observable来subscribe。Observable会通过调用observers的方法,向observersemits items或发送通知,“observer”也被称为“subscriber,” “watcher,” 或“reactor.”,通常被称为观察者模式、reactor模式等[6]。
Observables 和Observers仅仅是ReactiveX库的起点,它不仅仅只是对标准的观察者模式的一个小小的扩展,它更适于处理一系列事件而不只是一次回调函数的调用。
真正强大之处在于“reactive extensions” (因此这个库被命名为“ReactiveX”) — 可以对Observable发布的一系列items来做大量操作:transform,combine,manipulate等等。
这些Rx operators就可以用declarative方式将异步序列组合起来,这样既有回调函数的高效率,又避免了嵌套回调handlers在异步处理中典型的缺陷。这些operators包括:
Creating Observables
Create
,Defer
Empty/Never
ThrowFromIntervalJustRangeRepeatStartTimer
Transforming Observable Items
Buffer
FlatMapGroupByMapScanWindow
Filtering Observables
Debounce
DistinctElementAtFilterFirstIgnoreElementsLastSampleSkipSkipLastTakeTakeLast
Combining Observables
And
ThenWhenCombineLatestJoinMergeStartWithSwitchZip
Error Handling Operators
Catch
andRetry
Utility Operators
Delay
DoMaterializeDematerializeObserveOnSerializeSubscribeSubscribeOnTimeIntervalTimeoutTimestampUsing
Conditional and Boolean Operators
All
AmbContainsDefaultIfEmptySequenceEqualSkipUntilSkipWhileTakeUntilTakeWhile
Mathematical and Aggregate Operators
Average
ConcatCountMaxMinReduceSum
Converting Observables
To
Connectable Observable Operators
Connect
PublishRefCountReplay
Backpressure Operators
a variety of operators that enforce particular flow-control policies
许多operators处理Observable并返回Observable,这样这些operators就可以链式一个接一个调用。在链中的每个operator 处理的不是初始的Observable,而是在修改Observable后,将修改后的Observable依次传给下一个operator.
Builder模式也是类似地链式调用,但Builder模式中链中方法顺序是无关的,而Observable operators顺序是相关的。
ReactiveX库有Java实现RxJava,有JavaScript实现RxJS。
4. Angular2中的Http Service与Observable
Angular 1中使用Promise异步加载数据,但在Angular 2中使用Observable来处理异步请求 ,Observable类由ReactiveX库提供。 Angular 2中的Http service是Angular 1中$http的继承者,http.get( )方法不再返回一个Promise,而是返回一个Observable对象。
ngOnInit(){ this.getFoods(); } getFoods(){ this.http.get('/app/food.json') .map((res:Response)=>res.json()) .subscribe( data=>{this.foods=data},err=>console.error(err),()=>console.log('done') ); }
调用http.get( )来执行HTTP请求,返回一个Observable对象,这样就可以使用map( )方法来配置待处理的数据, 使用subscribe( )方法来观察处理结果。
由于Angular不知道需要将response解析为JSON,需要使用 .map((res:Response) => res.json()) 调用来让Angular知道. 这个map( )方法也返回一个Observable,这样就可以使用method chaining.
调用subscribe( ) 方法来接收output,其中的三个参数都是event handler. 分别是onNext,onError,和onCompleted.
onNext方法接收HTTP响应数据. Observables支持数据流,可以多次调用这个event handler。但对于HTTP请求数据,Observable通常是在一个调用中就返回所有数据。
当Observable将所有的数据都返回完成后,执行onCompleted event handler。这在Http.get() 调用中很少使用,因为需要的所有数据都传入到onNext handler。
这三个参数中,onError 和onCompleted是可选参数,但通常onError不能省略,否则一个未捕获的Error会导致应用停止执行。
5. Ionic2中的Provider、Service、Observable与Promise
Ionic2中Provider也就是一个Service,可以用ionic g provider PeopleService命令来生成一个名称为PeopleService的provider 。
Observable相对Promise有许多优势,因此Angular2中使用了RxJS。而当前Ionic中生成provider代码时使用的是ng2中的http模块,它是个observable,但then( )返回将它转为一个promise返回,ionic团队正在计划修改。
6. ionic-native与ngCordoava
Ionic 2中ionic-native替换了ngCordoava。
参考资料:
[1] Announcing the Release of Ionic 2 Beta 6!,http://blog.ionic.io/announcing-the-release-of-ionic-2-beta-6/
[2]10 Minutes with Ionic 2: Calling an API,http://blog.ionic.io/10-minutes-with-ionic-2-calling-an-api/
[3] Ionic Docs Nav,http://ionicframework.com/docs/v2/api/components/nav/Nav/
[4]Refactor provider generator to use observables properly #5532,https://github.com/driftyco/ionic/issues/5532/
[5]Angular 2: HTTP,Observables,and concurrent data loading,http://www.metaltoad.com/blog/angular-2-http-observables
[6]Observable,http://reactivex.io/documentation/observable.html
[7]Reactor Guide 中文翻译,http://reactor.jervyshi.me/index.html