java真实项目逻辑很复杂呢_iMove 基于 X6 + form-render 背后的思考

constApp = =>{// 引入方法useEffect( =>{// 事件监听——在节点代码中，通过`ctx.emit('a')`执行a事件，以下是监听此事件的函数logic.on( 'a', (data) => {});// 执行一条流程——触发执行“开始节点”逻辑触发名称为b的那条流程logic.invoke( 'b');}, []);return< div>xxx div>};

exportdefaultApp;

2)本地启动开发模式

1.安装 @imove/cli

$ npm install -g @imove/cli

2.进入项目根目录， imove 初始化

$cdyourProject$ imove --init # 或 imove -i

3.本地启动开发模式

$imove --dev # 或 imove -d

本地启动成功之后，可以看到原来的页面右上角会显示连接成功。

此时页面上触发“保存快捷键 Ctrl + S”时，就可以看到当前项目的 src 目录下会多出一个 logic 目录，这就是 imove 编译生成的代码，此时你只要在你的组件中调用它即可。调用的方法仍然如本地打包出码中演示的一致。

为什么需要使用流程编排

了解了基于 imove 的开发方式，接下来具体讨论一下为什么需要这么做。试想一下，你有没有遇到过以下场景：

UI 经常发生变化，但是我想复用以往实现过的逻辑，却不知道代码在哪里，又要重新写一遍

产品的需求文档都是文字，我们只好在脑中构思逻辑，边写边想还容易遗漏逻辑，只好写完了代码反复检查

以前做的项目很久没做了，但是最近我想改，但是项目对我来说如此陌生，不知道代码是什么意思，无法快速入手

我要接手一个老项目，但是里面的代码逻辑很复杂，又没有什么注释，不知道如何是好

我是个新人，在做新业务时可能有很多不太清楚的实现逻辑，如关注店铺、判断登录、发送埋点……，没有什么文档参考，师兄又太忙，问起来很花时间

实现某个逻辑 a 时，想参考下以前别人实现的代码，但是大串大串的业务逻辑耦合在一起，不知道哪一部分才是逻辑 a，于是开始自己钻研……

以上这些种种问题，其实是前端开发中或多或少会遇到的痛点。其实，我们可以采用逻辑编排的开发方式，把业务中的一个个功能点按照逻辑顺序组织起来，不仅能够及时检查逻辑漏洞，还能沉淀非常多的业务逻辑，达到参考和复用的效果。以下是总结的采用可视化编排方式进行编程的好处：

(1)需求可视化

把需求按照流程图的方式展示出来，可视化的流程对于新人以及非开发同学来说是非常容易理解的，对了解业务有很大的帮助。特别是在判别条件非常多、业务身份非常多、业务流程冗长而复杂的场景中，能梳理好全部的需求逻辑，能更好地检查代码是否考虑了全部的需求场景。这使得交付、交流、接手会更容易。

(2)逻辑复用

因为代码是针对于节点粒度的，在做需求时，可以参考和复用已有的节点代码(如判断登录、关注店铺等等)，不仅对新人上手非常友好，也节约了反复编写重复代码的时间，能缩短开发周期。随着逻辑节点的不断沉淀，这种优势也会越发明显。

(3)提高代码规范

在现有的开发方式下，随着需求不断迭代，可能有会有越来越多的业务逻辑被分散在各个模块中，很可能会违反职责单一、高内聚低耦合的编程原则。而通过逻辑编排的方式开发，每次只针对一个节点编写代码，能保证各个能力职责单一，最后通过聚合的方式串联起整个业务逻辑。

现在思考一下，使用到逻辑编排后，上述列举出的种种问题，是不是会迎刃而解呢？

其实逻辑编排不是一种新出现的思想，其实像我们生活中，都有逻辑编排的影子。它只是按照行为逻辑，把一个个单一的业务行为(如限流、限购、加购等等)有序编织为一个完整流程，聚合成一条具有特定业务含义的执行链，每一个完整的流程都会有一个触发点。如下图，就是在业务场景中整理的流程图：

因此，在 coding 中引入逻辑编排的概念是有价值的，我们也正在尝试着使用新的开发模式去提高生产效率。

2

基于 x6 的流程编排

在上文中详细展示了为什么需要使用到流程编排，下面详细介绍下流程图绘制的原理。imove 底层采用了蚂蚁团队提供的 antv-X6 图编辑引擎 ，从而实现了流程图绘制的能力。

为什么要选用 antv-x6 作为底层绘图引擎呢？因为它基本能覆盖到流程图绘制的全部需求，内置了图编辑场景的常规交互和设计，能帮助我们快速创建画布、节点和边，能够做到开箱即用，使用是非常方便的。它开放了丰富的定制能力给到开发者，只需简单的配置就能实现想要的效果，其不仅仅支持流程图，还支持 DAG 图、 ER 图、组织架构图等等。在 imove 中我们仅仅使用到了流程图绘制的能力，其实 x6 还有更多的能力值得大家去使用去探索。下面结合 imove 框架的实现，详细介绍下我们实现流程图绘制的具体思路，如何从 0 到 1 实现可用的较为完备的流程图绘制能力。

画布设计

使用 x6 创建画布非常容易，实例化一个 x6 暴露的 Graph 对象即可。以下是画布的具体配置项，包括了一下特性。

节点是否可旋转

节点是否可调整大小

跨画布的复制 / 剪切 / 粘贴

节点连线规则配置

画布背景配置(支持颜色 / 图片 / 水印等)

网格配置

点选 / 框选配置

对齐线配置

键盘快捷键配置

撤销 / 重做能力

画布滚动、平移、居中、缩放等能力

鼠标滚轮缩放配置

……

具体的代码实现如下，注释了各类能力对应的 API 文档，大家有兴趣可以试试~

import {Graph} from '@antv/X6';const flowChart = new Graph({//渲染指定 dom 节点container:document.getElementById( 'flowChart'),//节点是否可旋转rotating:false,//节点是否可调整大小resizing:true,//剪切板，支持跨画布的复制/粘贴(详细文档： https:/ /X6.antv.vision/zh/docs/tutorial/basic/clipboard)clipboard:{enabled:true,useLocalStorage:true,},//节点连线规则配置(详细文档： https:/ /X6.antv.vision/zh/docs/api/graph/interaction#connecting)connecting:{snap:true,dangling:true,highlight:true,anchor:'center',connectionPoint:'anchor',router:{ name:'manhattan'}},//画布背景，支持颜色/图片/水印等(详细文档： https:/ /X6.antv.vision/zh/docs/tutorial/basic/background)background:{color:'#f8f9fa',},//网格配置(详细文档： https:/ /X6.antv.vision/zh/docs/tutorial/basic/grid)grid:{visible:true,},//点选/框选配置(详细文档： https:/ /X6.antv.vision/zh/docs/tutorial/basic/selection)selecting:{enabled:true,multiple:true,rubberband:true,movable:true,strict:true,showNodeSelectionBox:true},//对齐线配置，辅助移动节点排版(详细文档： https:/ /X6.antv.vision/zh/docs/tutorial/basic/snapline)snapline:{enabled:true,clean:100,},//撤销/重做能力(详细文档： https:/ /X6.antv.vision/zh/docs/tutorial/basic/history)history:{enabled:true,},//使画布具备滚动、平移