iOS 客戶端組件化演變歷程實例分析

　　架構(gòu)的演進(jìn)是為業(yè)務(wù)不斷發(fā)展服務(wù)的，架構(gòu)不能脫離業(yè)務(wù)，這是最基本的出發(fā)點。58 同城 iOS 客戶端隨著業(yè)務(wù)量和用戶量的持續(xù)增長，架構(gòu)也是不斷受到挑戰(zhàn)，采用什么樣的架構(gòu)去適應(yīng)這些變化，對技術(shù)人員來說也是一大考驗。58 App 的架構(gòu)先后經(jīng)歷了純 Native、引入 Hybrid 框架、底層服務(wù)組件化、業(yè)務(wù)線組件化，即整個 App 組件化的四個階段。”

　　第一版 App 架構(gòu)

　　早在 2010 年 58 同城誕生第一版 iOS 客戶端，按照傳統(tǒng)的 MVC 模式去設(shè)計，純 Native 頁面，這時的功能較為簡單，架構(gòu)也是如此，從上至下分為 UI 展現(xiàn)、業(yè)務(wù)邏輯、數(shù)據(jù)訪問三層，如圖 1 所示。和同期其他公司一樣，App 的出發(fā)點是為了快速搶占市場，采取“短平快”的方式開發(fā)。純 Native 的 App 在早期業(yè)務(wù)量不是太大的情況下，能滿足業(yè)務(wù)的需求。

　　圖 1 App 早期架構(gòu)

　　第二版架構(gòu)

　　Hybrid 框架需求

　　由于蘋果審核周期較長，業(yè)務(wù)需求不斷增大，有些業(yè)務(wù)如果用 Native 進(jìn)行開發(fā)，工作量大投入人員較多，也不能動態(tài)更新，如 58 App 的大類、列表、詳情頁面。這種情況下，用 HTML5 是比較流行的解決方式，由此產(chǎn)生了第二版架構(gòu)，如圖 2 所示，在 UI 層添加了 HTML5 頁面及 Hybrid 交互框架。

　　圖 2 帶 Hybrid 的架構(gòu)

　　當(dāng)時 58 App 設(shè)計時用于加載 HTML5 的組件是 UIWebView，也只能使用這個（彼時還沒有 WKWebView），但實現(xiàn)起來有幾個問題是需要解決的：

　　怎么解決 Hybrid 中 Web 和 Native 交互問題，如用戶點擊一個類別，能調(diào)起 Native 的一些方法去執(zhí)行相關(guān)頁面跳轉(zhuǎn)或?qū)懭罩尽?/p>

　　如何提高 HTML5 頁面的加載速度，HTML5 頁面加載時要下載一些 Java、CSS 及圖片資源，是比較耗時的。

　　設(shè)置緩存

　　為了方便描述，本文先介紹如何提高 HTML5 頁面加載速度的問題。

　　對于一些訪問比較頻繁的頁面，如大類列表詳情，我們早期采用的都是 HTML5 頁面。要加速這些頁面的渲染，就要想辦法提升資源的加載。那么如何實現(xiàn)呢？首先想到的是使用緩存，我們可以把這些頁面的資源內(nèi)置到 App 中隨版本發(fā)布。