前言
写着这么一个组件的原因也比较简单,因为现在在做的低代码编辑器需要可以进行事件的控制,而事实上我们的低代码平台的实现上主要还是比较偏向指令式的换而言之通常是这么个逻辑执行的:
执行 xxx 操作 -> 打开弹窗 -> 填写表单 -> 关闭弹窗
那么自然而然的,我们就可以想到实现这种运行方式的编辑器,必然是一个流程图编辑器,那么在流程图编辑器获得 json 数据以后要怎么执行便成了问题。
在第一版我们不需要实现非常复杂的管理,可以简单的直接使用递归的方式直观的实现。
思路
首先,流程图必然是图,那么对于数据,必然存在两种类型:
节点
首先我们需要讨论的节点,节点事实上是为了描述做什么的,那么对其最简单的抽象是这样的:
也就是说节点必然拥有一个 id 和一个 data 数据,data 数据用来描述这个节点是如何工作的。
为了方便测试和复用,那么我们在编写执行器的时候,大可不内置实现运行器,要求上级覆盖。
边
边是描述节点间关系的实体,那么对于边我们可以这么抽象:
对于边我们可以这么定义,data 是用来描述边是如何运行的,对于边需要关心的只有 from 和 to,至于最终 edge 的结果,我们默认他应该会返回一个 bool 来告诉我们是否可以去下一个节点即可。
这样我们就完成了全部的抽象,简单的写一下接口定义:
接口定义
首先我们定义传入类型
export interface RunnerSchema {
nodes: Node[];
edges: Edge[];
}
随后我们定义两种 runner 类型
type NodeRunner = (node: Node, arg: any) => Promise<any>;
type EdgeRunner = (edge: Edge, arg: any) => Promise<boolean>;
下面我们需要写一个 manage 类用来管理这些 runner (如果后续需要做一些复杂的前置或者后置,亦或者 运行池等行为可以覆盖这个基础实现)
之后还需要一个用来执行任务的类,manager 将会生成这个类,如果需要维护执行池的话,则需要把这个类储存下来,丢入池子,并等待完成。
功能实现
startTask
startTask 实现很简单:
triggerNode
TriggerJob
测试
最后我们需要简单的写一个测试用来检验结果是不是同预料的一致: