我理解的低代码平台、表单生成器的核心
我理解的低代码平台、表单生成器的核心
斜阳草树，寻常巷陌，人道寄奴曾住。想当年，金戈铁马，气吞万里如虎。
前情回顾
上次的代码处理掉了拖拽的问题，当然这个拖拽问题是个非常简单的问题。这次要讨论的问题应该是低代码或者表单生成器的一个核心问题。
组件数据如何转化成右侧的配置表单？
表单生成器 和 低代码平台的异同
如果是简单的表单生成器，数据流就非常简单，右侧配置-->表单组件-->全局状态控制表单数据，提交表单时从全局获取表单数据即可。因为它的表单组件非常简单，通常都是单个的数字，文本或者选项列表，字段比较好控制。
但是如果作为一个低代码平台的话，数据流就相对复杂。因为组件不仅仅是单个的文本输入框，有可能是个页面，图表等等，而且组件所需的数据也可能很多，并且类型多变。Object,Array,String,Number都有可能。
数据的真实流向
之前的数据的流程预计如下图:
参数==>Setter==>业务组件==>更新展示内容
当然也有可能不需要Setters,直接:
参数==>业务组件==>更新展示内容
这个其实是不准确的。如果只是简单的开发一个表单生成工具，这种数据流勉强能支撑起这么个小业务。考虑到如果我们是在开发一个界面配置平台，那么这种数据流就显得有些力不从心了。
那么，对于一个拖拽式的界面配置平台，核心是什么呢？毫无疑问，核心是业务组件。而业务组件的核心又在于组件需要的数据。所以，根据以上的分析，对于一个界面配置平台来说，真实的数据流应该如下图:
应该先根据组件中的数据去生成 能够展示右侧setter的数据格式 然后根据这个格式去渲染右侧的配置项。然后配置项的数据更新后，依次将数据回传到组件中。这样，才是一个完整的过程。
难点在于如何将组件中的数据表示为一个可以展示右侧setter的数据格式。比如一个组件中的数据如下:
// test.vue
...
data(){
return {
msg:{
value:'test'
}
}
}
这个时候就有可能需要先判断这个msg的类型，然后判断其value的类型，最后得出一个结论，它需要一个TextSetter。然后生成一个对应的数据格式，比如:
configParams:[
{
fieldName:'msg',
setterType:null,
fieldValue:[
{
fieldName:'value',
setterType:'TextSetter',
fieldValue:'test'
}
]
}
]
虽然组件中的data数据是个对象，但是渲染配置项的时候，转换成数组似乎更加合理一些。这样一来，基本上可以满足组件配置化的需求，进而可以实现页面配置化。
但与此同时，右侧参数配置区的展示也需要单独进行处理。因为参数的配置不在是单一的配置，一个复杂的业务组件中可能包含多个setter,并且这些setter有可能存在嵌套的关系。
这些其实已经无关紧要了，只要弄清楚了核心部分，剩下的就是一个搬砖的过程了。
最后
个人感觉用Vue开发一个这样的东西，比用react显得稍微复杂一些。因为react的函数式组件props可以直接接受children组件进渲染。在转换组件数据的时候更加容易一些。
而Vue的props又不能直接修改，以及一些其他的限制，所以还是感觉react在开发复杂应用的时候略胜一筹。
总结
有些东西我们平时都遇到过，并且也在用，但是有时候没有去深入的思考一些问题。只有当我们去深入的思考过一些问题后，才能对这些个问题有更加深入认识。
代码仓库:https://gitee.com/mynoe/low-code-platform.git
javascript基础知识总结
本文分享自 JavaScript高级程序设计 微信公众号，前往查看
如有侵权，请联系 cloudcommunity@tencent.com 删除。
本文参与?腾讯云自媒体分享计划? ，欢迎热爱写作的你一起参与！