低代码平台前端的设计与实现（二）构建引擎BuildEngine切面处理设计_低代码平台根据切面来实现

上一篇文章，我们介绍了如何设计并实现一个轻量级的根据JSON的渲染引擎，通过快速配置一份规范的JSON文本内容，就可以利用该JSON生成一个基础的UI界面。本文我们将回到低开的核心—页面拖拉拽，探讨关于页面拖拉拽的核心设计器Designer的一些基本前置需求，也就是构建引擎BuildEngine切面处理设计。

只要接触过低开平台的朋友都见过这样的场景，在设计器的画布中点击已经拖拉拽好的UI元素，会有一个边框，高亮显示当前的元素，还支持操作：

在上一篇文章我们介绍了创建的整个流程：由一个构建引擎（BuildEngine）通过读取JSON Schema的节点来匹配对应的节点类型来生成UI元素。

为了实现设计器画布选中边框的需求，首先想到的一个解决方案就是仿照BuildEngine做一个类似的DesignerBuildEngine，里面的流程和BuildEngine大致相同，只是在生成最终的ReactNode节点的时候，在其外围使用某个元素进行包裹，具备边框等功能：

// DesignerBuileEngine伪代码
class DesignerBuileEngine { innerBuild() { // 在返回某个ReactNode前，使用一个div包裹 const reactNode = xxx; return createElement( 'div', {  // 边框样式等数据  },  reactNode); }
} 
1
2
3

但是这并不是一个很优雅的设计，因为如果我们衍生出一个新的DesignerRenderEngine，那么我们需要同时维护一个设计态一个云形态两个Engine，尽管他们的处理流程大致相同。

切面设计

组件构建切面处理

为了避免功能代码的冗余，也更方便后续的扩展性。我们考虑采用切面的设计方案。将整个处理流程的某些环节加入切面，以达到灵活处理的目的。切面的实现可以有很多种形式，例如一个回调函数，又或者传入一个对象实例（本质上还是回调）。作为一个轻量级低开模块，我们暂时设计一个简单的函数ComponentBuildAspectHandler（组件构建切面处理器）来进行切面处理。

该切面方法作为BuildEngine的一个实例属性存在，在BuildEngine进行构建的时候，我们切入进行处理：

// 伪代码
class BuildEngin {
// 新增的属性
+ c
1
2
3