ionic2源码阅读——使用DI进行注入platform类

ionic2是一款优秀的基于angular2.X的前端框架，不仅提供了丰富的前端组件和样式，还借助cordova提供了许多app原生的api。但是这并不是ionic2优秀的主要原因，其优秀的根本原因是：优秀是种习惯，渗透到了骨子里（每行代码里）：

1. 首先 ionic2有一个设计精良的骨架，借助angular2，ionic搭建了一个高扩展性的基础框架。

2. 精致的封装，让开发人员解脱细节的苦，专注于业务。

既然很优秀，我们就从源码开始学习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，这个工厂方法需要注入依赖：

1. DOCUMENT,提供html的document对象的angular封装；

1. PlatformConfigToken，这是一个用于配置platform的常量类，主要封装了各个平台的判定方法，下面以ios进行说明这个参数的配置方法：
   

   

   ios配置参数

   
   superset和subsets用以指明此ios需要的上一级配置和可能的下一级配置。
   settings则是针对ios这一平台具体的配置，比如hoverCss表示是css否具有hover的行为。

2. 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