保存成功
保存失败,请重试
提交成功

前端 MVVM 模式中的数据层(Model)实战应用

作者/分享人:Think.
转转开放业务前端负责人,自2017年加入转转起,负责微信生态业务和多个垂直品类业务,带领团队完成转转小程序入驻微信钱包九宫格,承受微信红点千万级用户访问;在前端领域有深入研究,包括:sketch一键切图、前端数据模型化,小程序基础能力建设等多个方面,10年工作经验中,做了2年工程师,5年CEO,3年技术管理,对技术团队管理有独到的见解。

在 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 实现前端数据管理
已有437人预订
预订达标
文章出炉
     
19.10.16
19.10.21
本场 Chat 文章已出炉,购买后即可阅读文章并获得一张Think.的读者圈Pass
请务必添加GitChat服务号以查看活动进度及获取活动通知。
查看文章评论/提问
Howeel. Zhang.1 个月前
let result = res && res.data this.result.state = this.isSuccess(result) ? 'success' : 'fail' if (this.result.state == 'success') { this.result.data = this.handleData(result) resolve(this) } else { this.result.error = this.handleError(result) resolve(this) } result 是个 Boolean 值,是不是有问题?
Lee2 个月前
很不错,想用但是受限于业务区别,目前还用不到这么深,可以用到监控那里。学习了!
喵星日记3 个月前
get 方法是否缺少参数
wujackjack.3 个月前
获益良多 非常完善的一套监控机制
3 个月前
学习了
你可能还喜欢
程序员最好掌握的两个思维模式
杨老师
Java 集合底层原理剖析(List、Set、Map、Queue)
老牛
Vue 一步一步搭建企业级后台管理系统
一只帅帅的猿
基于 Spring Boot 的线程池最佳实践
古拉里
Spring Boot 面试指南(50 题)
axiya
使用 Vue.js + ElementUI 搭建自己的后台管理系统
_zw@huang
微信扫描登录
关注提示×
扫码关注公众号,获得 Chat 最新进展通知!
入群与作者交流×
扫码后回复关键字 入群
Chat·作者交流群
入群码
该二维码永久有效