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

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • Spring Boot 參考指南 介紹 轉載自:https://www.gitbook.com/book/qbgb...
    毛宇鵬閱讀 46,948評論 6 342
  • Spring Cloud為開發人員提供了快速構建分布式系統中一些常見模式的工具(例如配置管理,服務發現,斷路器,智...
    卡卡羅2017閱讀 134,914評論 18 139
  • 版本:Angular 5.0.0-alpha 依賴注入是重要的應用設計模式。它使用得非常廣泛,以至于幾乎每個人都稱...
    soojade閱讀 3,013評論 0 3
  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 173,242評論 25 708
  • 就是這場雨 別把它遺忘 就是這場雨 它在滋養著波浪 . 就是這場雨 隔著玻璃,也能看到流下來的悲涼 就是在這場雨里...
    水搖絹閱讀 263評論 2 1