低代码产品表单渲染架构

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

下面是一个表单的例子:

产品层

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

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

技术层

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

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

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

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

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

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

相关推荐
低代码布道师4 小时前
加油站小程序实战教程08动态获取城市和站点信息
低代码·小程序
低代码布道师1 天前
加油站小程序实战教程09显示站点信息
低代码·小程序
MuShan1 天前
JeecgBoot 一年使用心得
低代码
HUIBUR科技2 天前
用低代码平台集成人工智能:无需专业开发也能实现智能化
低代码·ai
NocoBase2 天前
2025 年开源替代方案为何正在取代 OutSystems?技术自由度与成本优势深度解析
低代码·开源·开发工具·无代码·outsystems
哔哩哔哩技术3 天前
猫耳大型活动提效——组件低代码化
低代码
低代码布道师4 天前
加油站小程序实战教程07城市管理
低代码·小程序
阿三08124 天前
低代码平台的后端架构设计与核心技术解析
低代码
_xaboy4 天前
FcDesigner页面样式错乱/功能不正常解决办法
vue.js·低代码·开源·动态表单·表单设计器
有颜有货4 天前
数字化工厂实施时,通常都会碰到“系统对接困难”的问题,这个用低代码能解决吗?
低代码