飞码LowCode前端技术（三）-京东云开发者社区

（如何便捷配置出页面-2）
作者：王光辉
部门：京东科技-市场与平台运营中心-营销与数据资产部-营销及数据平台研发部
## 简介
飞码是京东科技-市场与平台运营中心-平台研发部研发低代码产品，可使营销运营域下web页面快速搭建。飞码是单web页面搭建工具，从创建页面到监测再到投产的一站式解决方案。会通过七篇文章介绍飞码，分别是：（1）、背景与数据结构设计，（2）、如何便捷配置出页面-1，**（3）、如何便捷配置出页面-2**，（4）、如何便捷配置出页面-3，（5）、如何便捷配置出页面-4，（6）、如何便捷快速验证实现投产及飞码探索，（7）、飞码画布的设计。
本小节从数据、事件、业务支持三个方面进行分析。

## 一、数据设计
飞码LowCode前端技术（一）种对数据结构进行了分析，飞码是数据驱动+事件驱动，在编辑态配置区域需要页面中各种数据（接口出参、组件出参、页面入参、业务逻辑数据）。该部分仅说明飞码如何实现配置逻辑与规则的，如何实现数据驱动会在后续小节说明。
**数据复用**：一个组件的入参是固定值，例如select1组件list是一个固定值1，select2组件list也是一个固定值1，这个就需要数据的复用能力。飞码解决方案详见图1
<div style="display: flex; justify-content:center; width:100%">
    <img src="https://storage.360buyimg.com/fei-ma/神灯使用/202207/03/01.gif" width="60%"/>
</div>
<div style="display: flex; justify-content:center;width:100%">
      <span>图1</span>
</div>

**数据配置**：数据配置包含了数据A与数据B之间是赋值关系、逻辑判断关系，还是组合关系。结合业务实际情况，飞码归纳常见的数据配置情况。详见图2

对任何一个可配置的组件属性值，均可以通过全局数据视角进行配置。数据源是出参，设置数据是给某个组件或Api，弹框等设置数据。当我们需要处理复杂的业绩时，可以通过处理函数进行快速处理。飞码中的函数是常见的js函数，飞码也内置了form表单的校验函数，form校验规则也可以进行复用。该部分在事件小节说明。飞码支持用全局视角看页面的所有数据情况以及流转情况。

**数据导入**：页面配置过程需要看到页面中所有数据字段及数据层级结构，飞码认为有四种方案可以选择。一是对组件进行一一配置；二是先配置页面之后在组件中进行选择；三是通过组件id自动生成组件关联属性，之后与接口进行一一配对；四是组件与页面均可以配置，配置之后具有一致性。飞码使用方案四，可以组件层面进行关联字段配置，也可以页面进行配置。在实际搭建页面的情况下，发现页面级别的导入数据更为便捷。飞码目前也支持j-api、bff与组件关联之后进行导入能力。页面级别的数据字段导入详见图3

结合j-api可以通过接口数据直接生成页面的一部分，并实现组件字段与页面字段一致性。详见图4

## 二、事件设计
飞码对事件进行了分类，分为导航、组件显示&隐藏&禁用、数据、弹框&toast、操作、form操作、其他。如图5所示为事件编排区域。飞码中事件也支持配置，图5右侧区域为单事件节点的实例配置。每一个事件通过JSON配置实现（飞码lite版配置），支持动态加载额外新增事件。

飞码对常见事件进行提取归类，枚举如图5中左侧区域。通过编排方式进行业务配置。

**事件配置**：组件、页面生命周期、其他事件调用情况会使用事件。创建事件之后飞码会在缓存中记录事件id以及事件名称与相关的事件编排。研发可以在组件事件、页面事件、其他事件中进行配置。飞码编辑态事件流程如图6所示。

**事件与数据打通**：如图2所示，飞码支持在事件中进行数据的配置，例如messag中（如图7），点击js编辑器会唤醒图2，之后可以配置messag的提示语，提示语来自接口，飞码使用$api开头，接口id为其属性值，之后一级一级找错误信息即可。

**事件的复用**：飞码支持事件A，调用事件B，事件B调用事件C。也支持事件A根据配置的逻辑规则调用自己。
事件的串行与并行：飞码事件编排中任何一个节点的输出点支持作为多个事件节点的输入点。遇到多个事件同时触发的时候，可以实现事件的并行与串行执行。
**问题**：事件编排错误会导致事件死循环怎么解？
事件死循环一般是由于条件逻辑书写错误导致的，ProCode开发过程中也会遇到类似情况，方法A调用了方法B，方法B又调用了方法A，一直循环调用。常规配置导致的死循环飞码**FMHelper**会帮助监测到，当研发书写js导致的死循环飞码运行态**FMHelper**会最大能力监测，由于运行态数据未知性，部分死循环监测不到。该部分后续会加强逻辑处理。

## 三、业务支持设计
飞码的业务支持中，有权限与埋点。为了便捷研发搭建页面飞码增加了常见函数支持。
**权限设计**：已组件与页面维度，权限可以分为不可见与不可交互两种情况。A用户没有权限看到a组件（或者页面），B用户没有权限对a组件（或者页面）进行交互，C用户可以看到a组件（或者页面）并可以交互。
飞码权限依赖京东科技统一权限系统，实现流程如图8所示。

考虑安全节省带宽，对隐藏页面或者组件，飞码服务不会下发相应的DSL到飞码的运行态。
**埋点设计**：接入公司内部奇点平台，飞码对埋点进行分类。分为组件类型埋点（含曝光），与事件类型埋点。流程详见图9

飞码对组件，页面，事件的埋点方案，是通过配置化实现的。大大降低了理解成本与跨平台配置成本。
函数便捷配置能力：上一个章节中提到飞码官方提供的常见函数，常见函数处理枚举情况。该部分主要便捷研发书写js函数。
**问题**：函数是不是具备动态扩展能力？
函数与组件不太一样，常见的函数已全部枚举到飞码。飞码之前思考过通过飞码后管动态下发函数能力，发现实际使用场景并不多。目前飞码不支持动态扩展函数能力。后续依据情况是否增加函数动态扩展能力。

## 四：小结
本小节分析了飞码如何便捷配置出页面-2，分别对数据、事件、业务支持方面进行了详细介绍。数据配置、事件配置均可以通过全局视角看到整个页面相关数据结构与逻辑结构。业务支持方面最大限度的实现配置化，同时也支持函数配置，大大减少了研发书写js时间成本。下章节介绍[飞码LowCode前端技术（四）]如何便捷配置出页面-3，持续分析飞码编辑态中收藏与升级、页面UI结构、画布。