前端架構之移動端混合架構（hybrid）

從過去的切圖仔到如今的大前端，前端這一新興發展起來的領域已經在軟件行業變得尤為重要，一款重前端產品的成敗更在于他的架構。

架構

軟件整體結構與內部組件，外部軟件高效配合的合理設計。

好架構的標準

• 擴展性
• 穩定性
• 維護性

移動端混合架構（hybrid）

使用場景

• 創業型公司：這種類型公司的產品前期只有較為明確的理論基礎，并沒有很多實戰經驗和較大的用戶群體，還處于較為盲目混亂的階段。快速迭代產品，更快占領市場是他們的核心訴求。
• 更新較為頻繁的展現較多的產品：網頁的一大優點就是更新快，無需發布。
• 性能要求不高對手機硬件依賴較弱：網頁的缺點是無法直接調用本地硬件，采用該架構一定避免其劣勢。

基本結構

---

此架構主要分為三大部分：

• 數據 根據使用場景不同選擇最優存儲介質。

需要和app共享的數據可以放在app的存儲空間中通過jsBrige獲取和存儲。

需要持久化并且要在不同用戶直接共享的數據存儲在服務端也就是數據庫中，使用ajax交互。

單純在h5頁面直接共享的數據放在內存或者cookie中。

• 視圖 根據不同的技術棧和場景使用不最優的前端框架。
• app app提供一系列通用組件例如登錄，城市列表等。

關鍵問題

app需要提供的通用方法和組件

• 網絡狀態
• 加密，解密方法
• toast提示
• 本地相冊
• 本地攝像頭

app和web的界線

由于該架構屬于混合開發，難免出現某一個需求應該應該由app開發還是web開發。開發者可以根據以下特征定位，例如登錄模塊，不會頻繁更新，具有通用性，對性能要求較高，并且設計到安全問題，所以更加適合由app開發。對于手機硬件的使用app盡量提供對應接口供web使用，界面和功能解耦。二者開發都合適優先使用web開發，畢竟web開發速度快。

---

未完待續

轉載于:https://juejin.im/post/5b44dc616fb9a04fa13f1f11

總結

以上是生活随笔為你收集整理的前端架构之移动端混合架构（hybrid）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。