本文深入解析低代码平台 h5-dooring 的渲染引擎，重点介绍了SourceBox、ViewRender和DynamicEngine。ViewRender利用智能网格布局系统处理原子数据，DynamicEngine实现按需加载组件。通过理解这种渲染机制，有助于加速组件二次开发，但在代码出码时，现有方式需要进一步优化，可能涉及JSON Schema到源码的转换和AST解析。
首发自 语雀文档@blueju
前言
渲染引擎，一般来说我认为可以这么解释：将物料拖拽到设计器画布后，将其渲染成真实的组件的一种机制。
接下来将从代码层面由外到里地解读 h5-dooring 的渲染引擎。
SourceBox
SourceBox 组件是一个包含了工具栏、右键菜单、物料栏、画布、属性栏的大组件，由于渲染引擎所在的画布内的逻辑很多，便将其作为独立组件，名为 ViewRender。
只需要将关键数据作为属性传入即可完成渲染，属性名为 pointData，直译较为奇怪，暂且可理解为原子数据，记录了画布上所有组件信息。
ViewRender 组件还可传入拖拽、改变画布大小等一些修改 pointData 的 API 方法，无非是，此处便不做延展叙述了。
ViewRender
在这一层，有了些渲染引擎的端倪——布局处理（采用的是作者所说的基于 grid 的智能网格布局系统）
对原子数据 pointData 进行归类处理，划分出对布局有特殊要求的组件：固定组件、导航组件、头部组件、其他组件，在智能网格系统组件 GridLayout 的包裹下
最低0.47元/天 解锁文章
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
