低代码产品表单渲染架构

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

下面是一个表单的例子:

产品层

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

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

技术层

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

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

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

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

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

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

相关推荐
葡萄城技术团队3 天前
低代码 x AI,解锁数智化应用的创新引擎
人工智能·低代码
试着6 天前
【AI面试准备】元宇宙测试:AI+低代码构建虚拟场景压力测试
人工智能·低代码·面试
陈奕昆7 天前
低代码/AI是否会取代前端开发?
人工智能·低代码
大龄码农有梦想8 天前
基于【低代码+AI智能体】开发智能考试系统
人工智能·低代码·ai大模型·ai智能体·考试管理系统
by————组态10 天前
基于web组态优化策略研究
大数据·前端·物联网·低代码·数学建模·自动化
NocoBase13 天前
一家家具厂,如何用零代码搭建自己的 ERP ?
低代码·开源·资讯
布列瑟农的星空15 天前
webworker 实践:外部依赖引入和打包问题
前端·低代码
布列瑟农的星空15 天前
“千篇一律”的低代码平台正成为“毒瘤”
低代码
AiFlutter15 天前
AiFlutter 低代码平台介绍
低代码
samson_www17 天前
试水低代码平台Nocoly
数据库·低代码·low-code