低代码产品表单渲染架构

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

下面是一个表单的例子:

产品层

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

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

技术层

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

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

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

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

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

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

相关推荐
阿吉被迫了解低代码4 小时前
🚀 被迫认识低代码 之 Oinone上手二开前端组件
低代码
轻流AI2 天前
线索转化率翻3倍?AI重构CRM
大数据·人工智能·低代码·重构
首先要睡饱5 天前
学习腾讯无极低代码的第六天——Part1
低代码·腾讯
NocoBase5 天前
欧洲蘑菇巨头 Okechamp 如何用 6 周升级物流调度系统?
低代码·开源·资讯
霍格沃兹测试开发学社测试人社区6 天前
Dify入门指南(2):5 分钟部署 Dify:云服务 vs 本地 Docker
人工智能·低代码
得帆云低代码7 天前
2025平台进化趋势:AI与低代码重塑企业应用构建引擎(上)
低代码·openai·ai编程
pengzhuofan9 天前
项目一系列-第4章 在线接口文档 & 代码模板改造
低代码·ruoyi
Spider_Man11 天前
预览一开,灵魂出窍!低代码平台的魔法剧场大揭秘🎩✨
前端·低代码·typescript