KLOOK客戶端配置化方案 輕量級iOS頁面模塊化框架 （簡介）
-
背景
- 支付成功頁UI與業(yè)務(wù)邏輯耦合到一個頁面控制器，導(dǎo)致改動困難。加上大部分以前的頁面的架構(gòu)設(shè)計是不太方便與我們后續(xù)業(yè)務(wù)的快速發(fā)展，因此我們需要設(shè)計一個盡量適用于APP內(nèi)大部分頁面的模塊化方案，降低后續(xù)頁面開發(fā)與頁面變化所帶來的研發(fā)成本。
- 多條業(yè)務(wù)線共同修改訂單詳情頁，導(dǎo)致代碼沖突嚴重，代碼可讀性與維護性差，影響開發(fā)效率。
-
設(shè)計原則與目標(biāo)
- 框架設(shè)計要以現(xiàn)有架構(gòu)（MVC）為基礎(chǔ)，盡可能復(fù)用現(xiàn)有模塊以節(jié)省時間成本（例如一個舊的Cell，只需要遵循容器協(xié)議，即可復(fù)用于新容器，并且對舊的代碼沒有影響），框架需要低侵入性，方便以后替換與更改。
- 以后頁面內(nèi)以組件為單位，通過組合的方式，只需要配置文件增刪內(nèi)容，不需要改動到整體頁面UI代碼，就可以更改頁面內(nèi)容。且UI組件是可以以很低的成本復(fù)用到其他頁面。
-
簡單分析App頁面渲染與展示基本流程
請求網(wǎng)絡(luò)數(shù)據(jù) -> 渲染列表 -> 用戶交互 -> 跳轉(zhuǎn)新頁面 -> 繼續(xù)請求網(wǎng)絡(luò)數(shù)據(jù)...
請求網(wǎng)絡(luò)數(shù)據(jù) -> 渲染列表 -> 用戶交互 -> 刷新數(shù)據(jù)/更新視圖/提交數(shù)據(jù)
-
抽象APP內(nèi)有代表性的頁面結(jié)構(gòu)
-
純展示界面
-
首頁、城市/國家頁、活動詳情頁、訂單詳情頁、支付成功頁、越來越多的垂直頁...
image.png
-
-
具有交互邏輯界面
- 個人信息、下單頁、支付頁
-
-
可配置化抽象
-
頁面組件以 Section 為單位，分為UI部分，與viewModel部分，UI部分負責(zé)視圖樣式，ViewModel負責(zé)業(yè)務(wù)邏輯，隔離UI與業(yè)務(wù)邏輯，方便復(fù)用。因為部分頁面雖然UI一樣，但數(shù)據(jù)Model不同，有些頁面業(yè)務(wù)邏輯不變，但是UI卻有改動，這樣做可以隔離UI與業(yè)務(wù)邏輯，使UI與ViewModel都能達到可替換與復(fù)用的目的。
image.png
-
針對負責(zé)的模塊可以使用ViewModel，但目前的實現(xiàn)沒有使用，而是直接使用VC進行數(shù)據(jù)請求與業(yè)務(wù)邏輯處理 。后期做進一步優(yōu)化的時候再考慮實現(xiàn)
-
統(tǒng)一頁面容器，通過協(xié)議的方式，實現(xiàn)協(xié)議方法，就可以修改配置文件，放到這個頁面容器中（以前我們每個頁面并沒有使用統(tǒng)一的容器，導(dǎo)致UI組件在頁面之間復(fù)用的成本較高）
image.png- 在統(tǒng)一頁面容器中，Section 間可以任意組合 && Section內(nèi)可以配置獨立數(shù)據(jù)模型 && Section內(nèi)有獨立渲染與刷新數(shù)據(jù)機制
-
具體實現(xiàn)方案
字符串映射綁定Section視圖，刷新指定 Section
使用統(tǒng)一容器
-
代碼實現(xiàn)
容器協(xié)議
頁面配置類
-
重構(gòu)方案實現(xiàn)前后對比
- 看代碼....
-
優(yōu)勢 與 局限性
統(tǒng)一容器，減少代碼量，減輕負擔(dān)。通常情況下只需要修改配置文件即可組裝出頁面，讓開發(fā)者更專注于實現(xiàn)具體模塊樣式與業(yè)務(wù)。
邏輯清晰，業(yè)務(wù)與UI分離，利于后期維護。
擁抱變化，可以很方便的增刪或替換Section（只需要更改配置或映射關(guān)系）
利于復(fù)用，理論上在所有使用統(tǒng)一容器的頁面內(nèi)都可以復(fù)用現(xiàn)有Section
暫時不支持炫酷動畫，特殊業(yè)務(wù)界面暫不適用
-
后續(xù)
- 開發(fā)一個新的垂直頁，只需要拉取數(shù)據(jù)，并配置好該垂直頁需要使用的 Section
- 配置文件通過服務(wù)端下發(fā)，動態(tài)變更樣式（A/B Test）
