源宝导读：天际移动平台经过重构改版，近期正式发布了1.0版本，我们在低代码开发方面做了进一步增强。本文主要围绕前端Model、前端业务逻辑(领域模型)、数据层与视图层解耦(包装器模式)3个方面，给大家分享一下统一数据层方案的设计思路和实现。

一、背景

天际移动平台经过重构改版，近期正式发布了1.0版。在低代码开发方面进一步增强，内置了移动应用常用的系统组件，并提炼了表单和列表两大核心数据容器组件，使用了统一数据层解决方案。

以移动应用常见的表单详情页面为例，在移动平台完成搭建到最终渲染，基本流程如下：

1. 在平台注册获取表单详情数据的业务API，根据返回数据格式创建业务对象，业务对象包含业务字段。

2. 拖拽表单容器到页面中，绑定数据源到注册的业务API。

3. 拖拽表单组件，如文本框组件，绑定字段为当前业务API返回业务对象的字段。

4. 页面渲染流程：

   1. 根据业务API返回的业务对象格式初始化前端Model。

   2. 表单容器调用领域服务获取业务数据、填充Model、透传表单组件。

   3. 表单组件根据绑定的业务字段动态解析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，目前负责天际移动平台的相关研发工作。

也许您还想看

移动建模平台元数据存储架构演进

AI云店小程序演变之路

基于 Go 的微服务运行情况监控实践

在明源云客，一个全新的服务会经历什么？

云客后台优化的“前世今生”(一)