面向前端开发者的逻辑编排工具，流程可视化的 JavaScript 工具库

iMove 是一个面向前端开发者的逻辑编排工具，核心解决的是复杂逻辑复用的问题。iMove 由 2 部分组成：画布和 imove-sdk。通过本地起一个 http 服务运行画布，在画布上完成代码编写和节点编排，最终将流程导出 dsl，放到项目中，通过 imove-sdk 调用执行。

特性

流程可视化：上手简单，绘图方便，逻辑表达更直观，易于理解
逻辑复用：iMove 节点支持复用，单节点支持参数配置
灵活可扩展：仅需写一个函数，节点可扩展，支持插件集成
适用于 JavaScript 所有场景：比如前端点击事件，Ajax 请求和 Node.js 后端 API 等
多语言编译：无语言编译出码限制（例：支持 JavaScript, Java 编译出码）

适用场景

流程可视化，让逻辑编写更简单
可以导出，然后代码直接调用。避免被平台绑定
支持前端和 node，只要是支持 esm 的平台或系统都可以

快速开始

1. 准备工作

安装并启动项目

$ git clone git@github.com:imgcook/imove.git
$ cd imove/example
$ npm install
$ npm start

项目成功启动后，浏览器会自动打开 http://localhost:8000/，如下所示：

2. 绘制流程图

项目启动成功后，可以从左侧面板中依次拖动节点至中间的画布，从而完成流程图的绘制工作

2.1 创建节点

当左侧面板中的节点被拖入中间的画布时，即完成一个节点的创建

2.2 节点类型

在 iMove 中，我们将流程图的节点一共分为以下 3 种类型：

开始节点：逻辑起始，是所有流程的开始，可以是一次生命周期初始化/一次点击
行为节点：逻辑执行，可以是一次网络请求/一次改变状态/发送埋点等
分支节点：逻辑路由，根据不同的逻辑执行结果跳转到不同的节点

（注：一条逻辑流程必须以开始节点为起始）

根据上述的规范描述，我们可以绘制出各种各样的逻辑流程图，例如 获取个人数据 的逻辑流程图如下所示：

2.3 配置节点

接下来，我们需要依次选中图中的节点，完成右边面板中的基础配置信息填写通常来说，节点配置使用频率最高的有：

显示名称：更改节点名称
逻辑触发名称：开始节点 才有的专属配置，项目代码使用时根据这个值触发逻辑调用

2.4 节点代码规范

双击节点 即可打开代码编辑器，编写节点代码每个节点的代码等价于一个 js 文件，因此你不用担心全局变量的命名污染问题，甚至可以 import 现成的 npm 包，但最后必须 export 一个函数。

需要注意的是，由于 iMove 天生支持节点代码的异步调用，因此 export 出的函数默认是一个 promise。

就拿上图中的 是否登录 这个分支节点为例，我们来看下节点代码该如何编写：

export default async function() {
  return fetch('/api/isLogin')
    .then(res => res.json())
   .then(res => {
     const {success, data: {isLogin} = {}} = res;
     return success && isLogin;
   }).catch(err => {
     console.log('fetch /api/isLogin failed, the err is:', err);
     return false;
   });
}

注：由于该节点是 分支节点，因此其 boolean 返回值决定了整个流程的走向。

2.5 节点间数据通信

最后，我们再来看下节点之间是如何数据通信的。

在 iMove 中，数据是以流（pipe）的形式从前往后进行流动的，也就是说前一个节点的返回值会是下一个节点的输入。不过也有一个例外，由于 分支节点 的返回值是 boolean 类型，因此它的下游节点拿到的输入必将是一个 boolean 类型值，从而造成数据流的中断。

为了在项目的实际使用中更方便，我们对此进行了一定的改造：分支节点的作用只负责数据流的转发，就像一个开关一样，只决定数据流的走向，但不改变流向下游的数据流值。

为了更容易理解，我们来看下上文例子中 请求profile接口、请求成功 和 返回数据 这 3 个节点是如何进行数据通信的：

// 节点: 请求profile接口
export default async function() {
  return fetch('/api/profile')
    .then(res => res.json())
   .then(res => {
     const {success, data} = res;
     return {success, data};
   }).catch(err => {
     console.log('fetch /api/isLogin failed, the err is:', err);
     return {success: false};
   });
}

// 节点: 请求成功
export default async function(ctx) {
  // 获取到上游节点返回的数据
  const pipe = ctx.getPipe() || {};
  return pipe.success;
}

// 节点: 返回数据
const doSomething = (data) => {
  // TODO: 数据加工处理
  return data;
};

export default async function(ctx) {
  // 这里获取到的上游数据，不是"接口成功"这个分支节点的返回值，而是"请求profile接口"这个节点的返回值
  const pipe = ctx.getPipe() || {};
  ctx.emit('updateUI', {profileData: doSomething(pipe.data)});
}

如上所述，我们可以看到：

每个下游节点通过 ctx.getPipe 方法来获取上游节点返回的数据流
中间的 请求成功 节点返回值 success 值就是一个数据流走向的开关，其后面 返回数据 节点拿到的 pipe 数据是前面 请求profile接口 的返回值

除此之外，需要注意 返回数据 节点的最后一行代码 ctx.emit('eventName', data) 需要和你项目中的代码配合使用，这点会在后文提到。

3. 项目中使用流程图编译生成的代码

在完成所有节点的配置之后，需要对流程图进行编译，才能在你的项目中使用生成的代码。目前支持两种出码方式：在线出码、本地命令行出码

3.1 在线出码

点击页面右上方的导出按钮后，可以在弹窗内选择导出 代码，此时流程图编译后的代码将以 zip 包的形式下载到本地，你可以解压后再引入项目中使用。

3.2 本地命令行出码

安装 CLI

$ npm install -g @imove/cli

进入项目根目录， iMove 初始化

$ cd yourProject
$ imove --init # 或 imove -i

本地启动开发模式

$ imove --dev # 或 imove -d

本地启动成功之后，可以看到原来的页面右上角会显示连接成功此时在页面上触发 保存快捷键 Ctrl + S 时，可以看到当前项目的 src 目录下会多出一个 logic 目录，这就是 iMove 编译生成的代码，此时你只要在你的组件中调用它即可。

// file: src/App.js

import React, {useState, useEffect} from 'react';
import logic from './logic';

const App = () => {

  const [state, setState] = useState({});

  useEffect(() => {
    // NOTE: 监听 updateUI 事件，
    logic.on('updateUI', (data) => {
      const {profileData} = data || {};
      setState(profileData);
    });
    // NOTE: 调用逻辑
    logic.invoke('getProfile');
  }, []);

  const {profileData} = state;
  const {nickName, avatar} = profileData || {};

  return profileData && (
    <div>
      <span>{nickName}</span>
     <img src={avatar} />
    </div>
  );
};

export default App;