斜阳草树,寻常项陌,人道寄奴曾住。想当年,金戈铁马,气吞万里如虎。
前情回顾
上次的代码处理掉了拖拽的问题,当然这个拖拽问题是个非常简单的问题。这次要讨论的问题应该是低代码
或者表单生成器
的一个核心问题。
组件数据如何转化成右侧的配置表单
?
表单生成器 和 低代码平台的异同
如果是简单的表单生成器,数据流就非常简单,右侧配置
-->表单组件
-->全局状态控制表单数据
,提交表单时从全局获取表单数据即可。因为它的表单组件非常简单,通常都是单个的数字,文本或者选项列表,字段比较好控制。
但是如果作为一个低代码平台的话,数据流就相对复杂。因为组件不仅仅是单个的文本输入框,有可能是个页面,图表等等,而且组件所需的数据也可能很多,并且类型多变。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高级程序设计》
「加个关注」
- 不妨
「转发一下」
,好东西要记得分享