vuex(pinan)、mobx、mobx-react都是使用观察者模式
eventbus用的是发布订阅模式
低代码平台的实现:
表单内的单个组件用了react的组件库,渲染器的难点在于如何通过一个计算逻辑来显示使得组件间的数据可以进行联动。
比如: {A}+{B}={C}
组件C的状态依赖于A+B 的计算结果。硬编码可以解决这个问题,只是会有无数的switc case,凡是增加一个组件类型,计算逻辑,就要增加switch case 的条件判断。这种编码方式一点也不优雅。
那到底如何设计一个渲染器,达到以下的效果呢?
FormRender(schema,components)=>最终渲染出一个实际的动态组件
首先,schema中包含了所有通过设计器设计的组件的集合及关系、事件,components是渲染器可以支持渲染的组件集合(eg:ant-d中的基础组件)
- 深度遍历schema中的组件
- 从components中取出schmea需要的组件并保存到一个
componementMap<id:string,value:component>中,并对其中的props使用vue3的reactive进行响应式拦截。 - 对每个component事件进行绑定
- 使用component的forceupdate进行更新
反思: 在报表平台的设计器中,用了最原始的js进行json处理,计算,并绘制dom,绑定事件,有以下的优缺点:
优点:
- 布局灵活
- 代码灵活
缺点:
- 渲染器维护成本高
- 添加任何组件都需要定制化开发
低代码平台:
优点:
- 有独立的渲染器,一次实现,多次使用,跨平台和框架可以使用
- 可扩展性强,低代码平台的表单组件支持扩展即可,渲染器无需变更
缺点:
为什么不用绝对定位