低代码产品表单渲染架构

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

下面是一个表单的例子:

产品层

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

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

技术层

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

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

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

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

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

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

相关推荐
Geek-Chow18 小时前
05.03 · n8n 源码剖析:Webhook 接入层 Webhook Ingress
低代码
加班循环19 小时前
前端嵌入低代码页面:iframe与微前端的取舍
低代码
内存过载19 小时前
流程实例状态追踪:事件溯源模式的应用
低代码
像素是个问题19 小时前
慢查询排查实战:业务报表SQL优化路径
低代码
IT研究所1 天前
AI-ITR平台如何减少客户问题反复升级?
大数据·运维·人工智能·低代码·自然语言处理·安全架构·企微
guslegend2 天前
需求分析和架构设计:做什么,如何做
低代码·需求分析·架构设计·ssr·前端架构
三号路口2 天前
低代码平台的扩展机制:插件化架构怎么设计
低代码
百数平台2 天前
百数照片知识库配置指南:图片上传、OCR 识别与智能 / 人工标注全流程说明
低代码·ai·ocr
百数平台2 天前
百数表单知识库配置指南:对接低代码业务表单、字段自动映射与实时同步全说明
低代码·ai
百数平台2 天前
百数AI智能体基础开发流程:从创建、设计、发布到表单自动回填(含JSON输出与apaas配置)
低代码