低代码产品表单渲染架构

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

下面是一个表单的例子:

产品层

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

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

技术层

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

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

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

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

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

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

相关推荐
踩着两条虫12 小时前
AI 低代码引擎可视化设计器交互机制实战
前端·vue.js·人工智能·低代码·架构
Jeking2171 天前
低代码平台表单设计器 unione form editor 布局组件--卡片布局
低代码·动态表单·表单设计·表单引擎·unione cloud
Jeking2171 天前
实战案例|用 unione form editor 搭建企业级用户注册表单,组件联动 + 标签布局一步到位
低代码·动态表单·表单设计·表单引擎·unione cloud
次元工程师!1 天前
LangFlow开发(三)—Bundles组件架构设计(3W+字详细讲解)
java·前端·python·低代码·langflow
Jeking2171 天前
低代码平台表单设计器 unione form editor 布局组件--栅格布局
低代码·动态表单·表单设计·表单引擎·unione cloud
卷叶小树1 天前
低代码 Runtime Lifecycle:逻辑执行时机
低代码
Jeking2172 天前
低代码平台表单设计器unione form editor组件介绍--多行输入组件
低代码·动态表单·表单设计·表单引擎·unione cloud
Jeking2172 天前
低代码平台表单设计器 unione form editor 布局组件--标签布局
低代码·动态表单·表单设计·表单引擎·unione cloud
一切皆是因缘际会2 天前
AI低代码开发实战:轻量化部署与多场景落地
人工智能·深度学习·低代码·机器学习·ai·架构
踩着两条虫3 天前
可视化设计器组件系统:从交互核心到 AI 智能代理的落地实践
开发语言·前端·人工智能·低代码·设计模式·架构