前端数据模型Model，适用于多人团队协作的开发模式

2023-12-30 12:01:39

前端数据模型Model，在多人团队中快乐地协作吧！ #

本文讲述的数据模型并不是一个库，也不是需要npm的包，仅仅只是一种在多人团队协作开发的时候拟定的规则。至少目前为止，我们的开发团队再也没用过mock（虽然一开始也没用），也不用担心后台数据的字段或结构发生变动，真正实现前后台并行开发的愉快模式。

一、引入概念
在正式介绍之前，先补充两个概念。

1.1 后台VO对象
针对业务需求，后台会设计出若干VO（Value Object）对象，用于表示不同场景下的数据集合。

1.2 Model
前端数据模型，是一个空对象，没有任何属性和方法。前端使用这个空对象来定义结构，并对结构中的数据做一些简单的验证。

二、前端数据模型的构建
2.1 基本写法

export interface ActivityModel {
  id: number;
  title: string;
  describe: string;
}

const model: ActivityModel = {
  id: 0,
  title: '',
  describe: ''
}

前端在使用的时候可以直接拷贝Model的内容进行修改，这样就能把数据类型维护在一个地方，不管后台如何变更，前端只需要在Model里改动即可，而不用在每一个页面里都做修改。

2.2 巧用类型定义
如果用枚举值、类型别名、甚至用范型定义一个Model，那我们的Model就能实现类型推断了。

export type ActivityModel = {
  id: number;
  title: string;
  describe: string;
}

export const model: ActivityModel = {
  id: 0,
  title: '',
  describe: ''
}

2.3 数据类型更严格一点

export interface ActivityModel {
  id: number;
  title: string;
  describe: string;
}

const model: ActivityModel | null = null

2.4 拓展内容
我们能在Model里对内容进行一些简单处理，比如字符串的长度限制，或者枚举值的限制，我们在model里可以把这些内容都封装起来。

三、前端数据模型在团队协作中的价值
3.1 后端可提前启动开发
目前，后端的数据结构都是通过文档分享的，由于缺乏文档的强制性，很多数据结构在前端没实现的情况下就被拍板确定了。有了Model，前端和后端的数据结构是强依赖的，前端无法实现，后端的数据结构必须做出相应的调整。

3.2 前后端并行开发
当接口准备好，或者数据结构确定之后，前端完全可以按照Model进行编码，无需等到真实接口对接好。有了类型定义以后，我们可以用类型推断、强校验来帮助我们编码，对于后端新接口的接入，可能只用对接部分方法即可。

3.3 降低沟通成本
如果前端开发说后端接口有问题，那么他只需要给后端一个Model，后端一看，就知道是哪个接口有问题。只要更新Model，前端就不用担心需要调整，除非后端调整了数据结构。

四、数据类型注解和TS
前端数据模型和TS类型注解有着天然的兼容性。有了TS，我们可以很容易地对Model进行类型推断和强校验。

4.1 TS类型注解的基本用法
例子一

let name: string = 'Jack'

例子二

let age = 18

例子三

let flag: boolean = true

TS会根据变量的值来推断变量的类型。
4.2 对Model的使用
例子一

export interface ActivityModel {
  id: number;
  title: string;
  describe: string;
}

const activity: ActivityModel = {
  id: 1,
  title: '示例活动',
  describe: '这是一个示例活动'
}

// 直接使用了ActivityModel
let title = activity.title

例子二

export interface ActivityModel {
  id: number;
  title: string;
  describe: string;
}

const model: ActivityModel | null = null

if (model !== null) {
  let title = model.title
}

类型别名可与类型注解联合使用。
例子三

type ActivityModel = {
  id: number;
  title: string;
  describe: string;
}

const activity: ActivityModel = {
  id: 1,
  title: '示例活动',
  describe: '这是一个示例活动'
}

let title = activity.title