前端 MVVM 模式中的數據層（Model）實戰應用
- 2019 年 10 月 31 日
- 筆記
當今時代，React、Vue、AngularJS 三大框架橫行，我們很難爭論出哪個是最好的框架，但三者共同點是 MVVM 的模式，用一張簡單的圖可以看到，MVVM 模式最出色的是 ViewModel 層，ViewModel 幫我們擺脫了麻煩的 DOM 操作，相比 MVC 模式有了質的飛躍。
然而本文想探討的不是 ViewModel，而是當前最被前端開發者忽視的 Model。
Model 在 MVC 與 MVVM 模式中都應該定義為數據層，理論上應該把所有跟數據相關的操作都抽取到這一層，但以筆者的經驗來看，目前前端開發者在 Model 層花的精力較少，原因可能有以下幾個方面：
- 前端工程裡面的數據操作相對簡單，基本都是以 API 調用為主，主要使用後端已經基本處理好的數據
- 前端業務數據處理相對簡單，在 ViewModel 層面進行處理就能滿足需求
- 前端開發者普遍缺乏資料庫操作經驗和對數據管理方面的意識
我們再看下後端語言中的 Model 層是什麼樣，以 PHP 圈內流行的 ThinkPhp 框架為例，這是一個用戶模型：
classUserextendsModel { /** * 查詢用戶資訊 */ publicfunction getUserInfo($uid) { } /** * 查詢用戶等級 */ publicfunction getUserLevel($uid) { } /** * 查詢是否被鎖定 */ publicfunction checkLockState($uid) { } /** * 查詢用戶訂單列表 */ publicfunction getUserOrderList($uid) { } /** * 查詢點贊列表 */ publicfunction getUserLikeList($uid) { } /** * 查詢用戶好友列表 */ publicfunction getUserFriendList($uid) { } //......其他操作 }
這段程式碼省略了其他更多方法和類的繼承，實際上會把涉及到用戶相關的所有增刪改查操作都抽取到一個數據模型當中，在 Control 層只使用 Model 提供的各種方法操作數據，而不會在 Control 層裡面再做 SQL 查詢。
在 MVVM 或者 MVC 模式當中，M 都是定義為 Model 層，也就是數據層，理論上應該把所有跟數據相關的操作都抽取到這一層，本文將講述在現行 Vue、React、AngularJS 等框架下，如何抽取 Model 層，包括：
- API 請求方式的統一封裝
- 介面的復用
- Model 實現
- 安全提取數據
- 統一的 Model 返回格式
- 統一錯誤提示
- 介面監控方案
- Mock 數據管理
- 更簡單使用 Model：提供 CLI 支援
- 介面快取方案
- 多介面聚合 Model
- 聚合 Model 的可視化
- Model 對接 GraphQL
- Model 結合 WebSQL 實現前端數據管理
