专栏首页CSDN技术头条前端 MVVM 模式中的数据层(Model)实战应用

前端 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 实现前端数据管理

本文分享自微信公众号 - GitChat精品课(CSDN_Tech)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-10-30

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • AngularJS-tree教程

    AngularJS-tree是AngularJS官方出品的tree控件,它与AngularJS无缝组合、且方便实用。AngularJS-tree的github官...

    逝兮诚
  • 可能是你见过的最完善的微前端解决方案

    技术栈无关:主框架不限制接入应用的技术栈,子应用具备完全自主权 独立开发、独立部署:子应用仓库独立,前后端可独立开发,部署完成后主框架自动完成同步更新 独立运行...

    用户4962466
  • AngularJS系列(二)——作用域和控制器

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 ...

    逝兮诚
  • AngularJS系列(一)——常用指令

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 ...

    逝兮诚
  • Modern Web Development, Design and Deployment

    Modern web development, design and deployment can be effectively described as ev...

    用户4822892
  • Angular React Vue我应该选择什么?

    为 web 应用选择 JavaScript 开发框架是一件很费脑筋的事。现如今 Angular 和 React 非常流行,并且最近出现的新贵 VueJS 同样博...

    gemron的空间
  • AngularJS系列(四)——服务

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 ...

    逝兮诚
  • AngularJS系列(十一)——路由和复制

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 ...

    逝兮诚
  • ui-select官方教程(一)——入门简介

    https://github.com/angular-ui/ui-select/wiki

    逝兮诚

扫码关注云+社区

领取腾讯云代金券