动态购物网站,好站站网站建设推广,外国最火的直播app,企业网站建设网站有哪些源宝导读#xff1a;天际移动平台经过重构改版#xff0c;近期正式发布了1.0版本#xff0c;我们在低代码开发方面做了进一步增强。本文主要围绕前端Model、前端业务逻辑(领域模型)、数据层与视图层解耦(包装器模式)3个方面#xff0c;给大家分享一下统一数据层方案的设计思… 源宝导读天际移动平台经过重构改版近期正式发布了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、我们封装了一个渲染被包装组件的方法 renderWrappedComponent4.2、创建数据容器包装器dataContainerWrappercreated阶段初始化数据Model存储在数据Store。mounted阶段请求业务数据并填充到前端Model。render阶段将前端Model数据传递给实际的组件进行渲染。包装器与数据层数据是通过MobX进行关联的通过observer观察数据变化响应式更新包装器。4.3、在组件渲染时通过数据容器Connect将组件与包装器连接起来五、总结 当前主流的前端框架在数据层上是缺失的本次实践结合前端Model、前端领域模型、数据层与视图层解耦等方面形成了一个可落地的解决方案这也是一个趋势感兴趣的可以深入了解下。------ END ------作者简介陈同学 开发SM目前负责天际移动平台的相关研发工作。也许您还想看移动建模平台元数据存储架构演进AI云店小程序演变之路基于 Go 的微服务运行情况监控实践在明源云客一个全新的服务会经历什么云客后台优化的“前世今生”(一)
