低代码产品表单渲染架构

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

下面是一个表单的例子:

产品层

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

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

技术层

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

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

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

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

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

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

相关推荐
jonyleek10 小时前
独立租户,统一底座:基于Vue3打造的JVS开源多租户框架设计与实现
低代码·前端框架·开源·vue·软件开发·轻应用
久数君14 小时前
斑斑VS氚云:制造企业数字化转型的两种路径选择
低代码·制造·数字化转型·制造业数字化转型·工厂信息化
低代码布道师19 小时前
医疗小程序04添加就诊人
低代码·小程序
loooooongger1 天前
(求虐)受不了前端天天改,自动化脚本天天崩!小弟肝了个工具,用“语义”干掉XPath,大佬们看这思路对吗?
低代码·测试
中杯可乐多加冰2 天前
基于网易CodeWave智能开发平台构建宝可梦图鉴
深度学习·低代码·ai·数据分析·数据采集·无代码·网易codewave征文
葡萄城技术团队3 天前
低代码平台与办公软件:协同进化,重塑数字化办公新生态
低代码
mudtools3 天前
解放双手!使用Roslyn生成代码让你的 HTTP 客户端开发变得如此简单
低代码·c#·.net
Alfred king5 天前
Dify chat模型streaming转为文字解决方案
低代码·agent·dify
葡萄城技术团队5 天前
活字格低代码:让业务流程设计从 “图纸” 到 “落地” 零 IT 转译
低代码