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類了。