低代码产品表单渲染架构

在React和Vue没有流行起来的时候,低代码产品的表单渲染设计通常会使用操作Dom的方式实现。

下面是一个表单的例子:

产品层

用户通过打开表单,使用不同业务场景业务下的表单页面,中间的Render层就是技术实现。

每一个不同业务的表单页面就是低代码产品中的一个元素。

技术层

渲染层的核心在于View和Controller,现代基于框架实现一般是MVVM的实现。上面是基于传统的前端框架实现(Jquery),少了M层,也就是Model。其实Model是在Controller层内部实现。

Controller层实现了数据的获取和传递,以及继承了第三方框架的能力(Jquery)

View层是表单控件的渲染和内部逻辑处理实现,包括渲染哪些控件,如何校验和响应控件事件等

View层中的Controls是所有表单控件的集合,通过对应不同的类型渲染不同的控件,例如:输入框,选择框等等。

View层中的IControl实现了每一个控件的基本属性和能力,Controls中的每个控件通过继承他来实现自己特有的功能。

View层可以被拓展,可以被添加其他属性。

相关推荐
数智化管理手记12 小时前
精益生产中的TPM管理是什么?一文破解设备零故障的密码
服务器·网络·数据库·低代码·制造·源代码管理·精益工程
麦聪聊数据16 小时前
企业数据流通与敏捷API交付实战(五):异构数据跨库联邦与零代码发布
数据库·sql·低代码·restful
麦聪聊数据1 天前
企业数据流通与敏捷API交付实战(四):DaaS与SQL2API
数据库·sql·低代码·restful
墨香幽梦客2 天前
IT治理工具箱:整合低代码、API管理与安全合规的统一管控平台建设
安全·低代码
云捷配低代码2 天前
低代码BI设计器:如何实现多数据源的实时数据分析与可视化?
低代码·数据挖掘·数据分析·自动化·数字化·敏捷流程·数字化转型
NocoBase2 天前
为 Excel 数据快速构建 Web 应用:4 种方法对比
前端·人工智能·低代码·开源·excel