ionic2是一款优秀的基于angular2.X的前端框架,不仅提供了丰富的前端组件和样式,还借助cordova提供了许多app原生的api。但是这并不是ionic2优秀的主要原因,其优秀的根本原因是:优秀是种习惯,渗透到了骨子里(每行代码里):
首先 ionic2有一个设计精良的骨架,借助angular2,ionic搭建了一个高扩展性的基础框架。
精致的封装,让开发人员解脱细节的苦,专注于业务。
既然很优秀,我们就从源码开始学习ionic2. 本文参考ionic2.0.0的源码,对应的代码可以在码云进行下载。
剧透一下,platform类主要是使用angular的factory方法进行依赖注入的。总体如下图:
自己画的,不标准
在《ionic2运行我们的组件》我们介绍了程序的启动组件是IonicApp这个类,这个类的代码截图如下:
ionicapp部分代码截图
我们看到了IonicApp这个类的依赖中包含Platform类,我们知道angular在实例化IonicApp时,会首先把其依赖的类进行注入。也就是说Platform 这个类进行实例化要早于IonicApp的实例化。
一般来说,angular的依赖注入都需要相应的类的提供商。提供商与下面几种:
useValue- 值提供商,useClass - 类提供商,useExisting - 别名提供商,useFactory - 工厂提供商
platform则使用工厂提供商,如下面的图:
index.ts代码部分截图
这里面使用了工厂方法setupPlatform
,这个工厂方法需要注入依赖:
DOCUMENT,提供html的document对象的angular封装;
PlatformConfigToken,这是一个用于配置platform的常量类,主要封装了各个平台的判定方法,下面以
ios
进行说明这个参数的配置方法:ios配置参数
superset和subsets用以指明此ios
需要的上一级配置和可能的下一级配置。
settings则是针对ios
这一平台具体的配置,比如hoverCss
表示是css否具有hover的行为。NgZone,是angular中用以变化监听的库,由于是angular的库,我们不做太多描述,可以参考这篇博文加深印象。
下面我们看一下setupPlatform
这个方法如何生产 Platform
的,源码截图如下:
工厂方法截图
方法首先实例化了一个Platform类,对这个类进行基础的设置,然后返回。上述的代码主要是对platform进行基础配置,比如设置平台配置参数,设置document对象,设置dir,lang,设置css的平台属性,设置window对象等等,这些都是基本的dom对象,比较简单。
上面的流程做完之后,我们便可以在app-root.ts中心安理得的使用Platform类了。
作者:cpu_driver
链接:https://www.jianshu.com/p/70ee0ba6fd47