前端 MVVM 模式中的数据层（Model）实战应用

当今时代，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 层，包括：

1. API 请求方式的统一封装
2. 接口的复用
3. Model 实现
4. 安全提取数据
5. 统一的 Model 返回格式
6. 统一错误提示
7. 接口监控方案
8. Mock 数据管理
9. 更简单使用 Model：提供 CLI 支持
10. 接口缓存方案
11. 多接口聚合 Model
12. 聚合 Model 的可视化
13. Model 对接 GraphQL
14. Model 结合 WebSQL 实现前端数据管理