低代码产品表单渲染架构

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

下面是一个表单的例子:

产品层

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

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

技术层

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

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

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

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

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

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

相关推荐
布列瑟农的星空16 小时前
我们在低代码平台建设中的犯过的错误
低代码
阿斯加德的IT19 小时前
Power Automate: 使用SharePoint列表填充Word模板
低代码
NocoBase2 天前
NocoBase 本周更新汇总:增加工作流分类管理
低代码·开源·资讯
听说名字越长的就越牛逼2 天前
Mendix,在开发组件之前,需要了解的部分知识
前端·react.js·低代码
阿斯加德的IT3 天前
Power Automate: 从Excel 选择列,每200条生成一个CSV文件并保存在sharepoint文档库
低代码·excel
NocoBase3 天前
PostgreSQL 用户必看:6 款强大的无代码平台推荐
低代码·开源·资讯
kaixin_啊啊4 天前
手把手教你用Appsmith打造企业级低代码平台:从部署到性能调优实战
低代码
NocoBase4 天前
NocoBase v1.7.0 正式版发布
低代码·开源·资讯
马克凤梨4 天前
低代码平台中的设置器:让配置变得简单有趣
低代码
答案answer5 天前
Three.js实现低代码开发的两种模式
前端·低代码·three.js