源宝导读：天际移动平台经过重构改版，近期正式发布了1.0版本，我们在低代码开发方面做了进一步增强。本文主要围绕前端Model、前端业务逻辑(领域模型)、数据层与视图层解耦(包装器模式)3个方面，给大家分享一下统一数据层方案的设计思路和实现。
一、背景
天际移动平台经过重构改版，近期正式发布了1.0版。在低代码开发方面进一步增强，内置了移动应用常用的系统组件，并提炼了表单和列表两大核心数据容器组件，使用了统一数据层解决方案。
以移动应用常见的表单详情页面为例，在移动平台完成搭建到最终渲染，基本流程如下：
在平台注册获取表单详情数据的业务API，根据返回数据格式创建业务对象，业务对象包含业务字段。
拖拽表单容器到页面中，绑定数据源到注册的业务API。
拖拽表单组件，如文本框组件，绑定字段为当前业务API返回业务对象的字段。
页面渲染流程：
-
根据业务API返回的业务对象格式初始化前端Model。
表单容器调用领域服务获取业务数据、填充Model、透传表单组件。
表单组件根据绑定的业务字段动态解析Model数据进行渲染。
本文主要围绕前端Model、前端业务逻辑(领域模型)、数据层与视图层解耦(包装器模式)3个方面，分享下统一数据层方案的设计思路和实现。
二、 前端Model
相较于后端Model，前端Model更像是一个容器，用于存放后端接口返回的数据，是前端数据层的最上游，也是接下来一切数据流动的起点。除了存储接口返回的数据，一般前端维护一套Model还需要进行容错处理，即运行时类型校验，这对提高系统的健壮性有很大的帮助。
2.1、技术选型
我们选用了mobx-state-tree(MST)实现数据层的Model，它是一种状态容器。MST的中心是活跃树的概念。每个树都具有形状（类型信息）和状态（数据）。从这棵活树上，会自动生成不可变的，结构共享的快照。
类型的设计使得它在设计时和运行时都可以用来验证类型正确性（设计时类型检查仅在TypeScript中起作用）。
运行时类型错误：
设计时类型错误：
2.2、实现细节
根据数据容器组件绑定的业务API接口返回的业务对象元数据，动态生成该数据容器的前端model，并存储到数据Store。
业务对象元数据示例：
动态生成前端model示例：
三、前端业务逻辑(领域模型)
在我们之前的《领域驱动设计DDD在前端应用的探索》分享中，详细说明了如何利用DDD分层架构，来实现前端业务逻辑解耦的理论性探索，简单回顾下。
3.1、前端业务逻辑解耦-DDD设计思路
3.2、实现细节
领域实体：
领域服务：
四、数据层与视图层解耦(包装器模式)
统一了数据层以后，组件只用来渲染数据，内部不用做数据相关的处理，更加轻量化。而数据层与组件渲染(视图层)是通过包装器模式进行解耦的。
在主流前端框架（React或Vue）中的高阶组件HOC，就是采用这种设计模式，移动平台是基于Vue技术栈开发的。
4.1、我们封装了一个渲染被包装组件的方法 renderWrappedComponent
4.2、创建数据容器包装器dataContainerWrapper
created阶段初始化数据Model存储在数据Store。
mounted阶段请求业务数据并填充到前端Model。
render阶段将前端Model数据传递给实际的组件进行渲染。
包装器与数据层数据是通过MobX进行关联的，通过observer观察数据变化，响应式更新包装器。
4.3、在组件渲染时通过数据容器Connect，将组件与包装器连接起来
五、总结
当前主流的前端框架在数据层上是缺失的，本次实践结合前端Model、前端领域模型、数据层与视图层解耦等方面，形成了一个可落地的解决方案，这也是一个趋势，感兴趣的可以深入了解下。
------ END ------
作者简介
陈同学： 开发SM，目前负责天际移动平台的相关研发工作。
也许您还想看
