工作流程拆解

image.png

基础原则

  1. 每一帧为一个函数
  2. 函数可以返回纯数据，也可以返回另一帧
  3. 函数按照加入工作流的顺序向下执行

示例

  2. import {Flow} from './lib/flow.gs';
  5. var flow = Flow();
  7. function frame(data, flow){
  8.   var nextData = {};
  9.     return nextData;
  10. }
  12. // 主流程
  13. flow.push(frame)
  14. flow.push(frame)
  15. flow.push("abc",frame)
  16. flow.push(frame)
  17. flow.push(frame)
  19. //分支流程2
  20. flow.push(frame)
  21. flow.push(frame)
  22. flow.push(frame)
  23. flow.push(frame)
  24. flow.push(frame)
  26. //分支流程1
  27. flow.push(frame)
  28. flow.push(frame)
  29. flow.push(frame)
  30. flow.push(frame)
  33. //其他状态
  34. flow.push(frame)
  36. //开始流程
  37. flow.start();

Flow.gs

请直接拷贝以下代码到 src/lib/flow.gs 文件中去

  1. function frameDescribe(stepIndex, data) {
  2.     return {
  3.         IS_FRAME: true,
  4.         stepIndex,
  5.         data: data || {}
  6.     }
  7. }
  9. function copy(data) {
  10.     return typeof data === 'object' ? JSON.parse(JSON.stringify(data)) : data;
  11. }
  13. export function Flow() {
  14.     // 历史栈 index 记录
  15.     var stepIndexRecord = [];
  16.     // 历史栈 关键帧 记录
  17.     var stepFrameRecord = [];
  18.     var stepDataRecord = [];
  19.     var flowList = [];
  20.     var eventFlow = {};
  21.     var stepIndex = 0;
  22.     var context = {}
  24.     function isBack(input) {
  25.         return String(input) === "back";
  26.     }
  28.     function push(keyFrame, fn) {
  29.         if (typeof keyFrame === "string") {
  30.             flowList.push([fn, keyFrame]);
  31.         } else {
  32.             flowList.push([keyFrame]);
  33.         }
  34.     }
  36.     function start(data) {
  37.         stepIndex = 0;
  38.         stepIndexRecord = [];
  39.         stepFrameRecord = [];
  40.         stepDataRecord = []
  41.         next(data !== undefined ? data : {});
  42.     }
  44.     function next(data) {
  45.         // 超出所有步骤
  46.         if (stepIndex >= flowList.length) {
  47.             stepIndex = 0;
  48.         }
  49.         var frame = flowList[stepIndex];
  50.         if (frame) {
  51.             var framefn = frame[0];
  52.             // 执行记录
  53.             stepIndexRecord.push(stepIndex);
  54.             stepFrameRecord.push(frame[1]);
  55.             // 数据记录
  56.             stepDataRecord.push(copy(data));
  57.             // 在当前 flow 中保存 data
  58.             context.data = data;
  59.             var ret = framefn(data, context);
  60.             if (ret && ret.IS_FRAME) {
  61.                 // 当前 flow 的其他状态
  62.                 stepIndex = ret.stepIndex;
  63.                 ret = ret.data;
  64.             } else {
  65.                 stepIndex++;
  66.             }
  67.             // 正常执行下一步
  68.             next(ret);
  69.         } else {
  70.             throw new Error("not frame index: " + stepIndex);
  71.         }
  72.     }
  74.     function getKeyFrame(frame, data) {
  75.         if (frame === undefined) {
  76.             throw new Error("frame must be string");
  77.         }
  79.         if (frame === "FLOW_FIRST") {
  80.             return frameDescribe(0, data)
  81.         }
  83.         if (frame === "FLOW_LAST") {
  84.             return frameDescribe(flowList.length - 1, data)
  85.         }
  87.         for (var i = 0; i < flowList.length; i++) {
  88.             if (flowList[i][1] === frame) {
  89.                 return frameDescribe(i, data)
  90.             }
  91.         }
  93.         throw new Error("not find " + frame + " key");
  94.     }
  96.     function has(frame) {
  97.         try {
  98.             getKeyFrame(frame);
  99.             return true;
  100.         } catch (e) {
  101.             return false;
  102.         }
  103.     }
  105.     function getFirstFrame(frame) {
  106.         return getKeyFrame("FLOW_FIRST");
  107.     }
  109.     function getLastFrame(frame) {
  110.         return getKeyFrame("FLOW_LAST");
  111.     }
  113.     function getCurrentFrame(data) {
  114.         return frameDescribe(stepIndex, data);
  115.     }
  117.     // 从新播放当前帧，不会被记录到历史
  118.     function replayCurrentFrame(data) {
  119.         var nextFrameDescribe = getCurrentFrame(data);
  120.         stepIndexRecord = stepIndexRecord.slice(0, -1);
  121.         stepFrameRecord = stepFrameRecord.slice(0, -1);
  122.         stepDataRecord = stepDataRecord.slice(0, -1);
  123.         return nextFrameDescribe;
  124.     }
  126.     // 删除当前帧，使历史记录中不包含当前帧
  127.     function deleteCurrentFrame(){
  128.         stepIndexRecord = stepIndexRecord.slice(0, -1);
  129.         stepFrameRecord = stepFrameRecord.slice(0, -1);
  130.         stepDataRecord = stepDataRecord.slice(0, -1);
  131.     }
  133.     // 返回上一个来源帧
  134.     function back() {
  135.         var index = 0;
  136.         var data = {}
  137.         if (stepIndexRecord.length >= 2) {
  138.             // 删除最后一个元素
  139.             index = stepIndexRecord[stepIndexRecord.length - 2];
  140.             data = stepDataRecord[stepDataRecord.length - 2];
  141.             stepIndexRecord = stepIndexRecord.slice(0, -2);
  142.             stepFrameRecord = stepFrameRecord.slice(0, -2);
  143.             stepDataRecord = stepDataRecord.slice(0, -2);
  144.         } else {
  145.             stepIndexRecord = [];
  146.             stepDataRecord = [];
  147.         }
  148.         return frameDescribe(index, data);
  149.     }
  150.     // 返回历史栈里固定的一个关键帧
  151.     function backTo(frame, data){
  152.         if(frame === undefined){
  153.             throw new Error('back to must be frame key')
  154.         }
  155.         const index = stepFrameRecord.indexOf(frame);
  156.         if(index > -1){
  157.             var historyData = data || stepDataRecord[index];
  158.             stepIndexRecord = stepIndexRecord.slice(0, index);
  159.             stepFrameRecord = stepFrameRecord.slice(0, index);
  160.             stepDataRecord = stepDataRecord.slice(0, index);
  161.             return getKeyFrame(frame, historyData);
  162.         };
  163.         throw new Error('back to not found :'+ frame)
  164.     }
  166.     // 从固定帧开始执行
  167.     function startFrom(frameDescribe, data) {
  169.         if (typeof frameDescribe === "string") {
  170.             if (has(frameDescribe)) {
  171.                 frameDescribe = getKeyFrame(frameDescribe, data);
  172.             } else {
  173.                 throw new Error(frameDescribe + " not found")
  174.             }
  175.         }
  176.         stepIndexRecord = [];
  177.         stepFrameRecord = [];
  178.         stepDataRecord = [];
  179.         stepIndex = frameDescribe.stepIndex;
  180.         next(frameDescribe.data);
  181.     }
  183.     context.push = push;
  184.     context.isBack = isBack;
  185.     context.start = start;
  186.     context.get = getKeyFrame;
  187.     context.has = has;
  188.     context.back = back;
  189.     context.backTo = backTo;
  190.     context.getFirstFrame = getFirstFrame;
  191.     context.getLastFrame = getLastFrame;
  192.     context.getCurrentFrame = getCurrentFrame;
  193.     context.replayCurrentFrame = replayCurrentFrame;
  194.     context.deleteCurrentFrame = deleteCurrentFrame;
  195.     context.restart = start;
  196.     context.startFrom = startFrom;
  198.     return context;
  199. }

用法

import { Flow } from './lib/flow.gs';


var flow = Flow();
// 状态1
flow.push(function(data, flow){

  var code = labor.scan("xxx/lemo.json",{});

  // 跳转回上一步
  if(flow.isBack(code)){
      return flow.back();
  }

  if(code === "3"){
    //跳转到 p3
      return flow.get("abc", {})
  }

  // 跳转到下一个步
  return {}
})

// 状态2
flow.push("p3",function(data, flow){

  if(true){
    // 从第一步重新开始，会清空历史栈
      return flow.restart();
  }
    return {}
})


function fenzhifn(){
  // 从xxx流程开始执行
    flow.startFrom(flow.get("xxx", {}));
}

// options 用法
flow.push(function(){
    const options = {
      "分支1":"fenzhifn"
  }
    var code = labor.scan("xxx/lemo.json",{}, options);
})

// 结束状态处理
flow.push("release", function(){
    labor.release();
})

flow.start();

API

Flow()

var flow = Flow();

flow.data

可以获取当前帧的数据。与当前帧第一个参数data完全相等（同一个对象引用）

flow.push(function p1(data, flow){
    data === flow.data // true

  return {
      a:1
  }
})

flow.push(function p2(data, flow){
    data.a // 1
  flow.data.a // 1
})

flow.start();

flow.back()

获得上一帧，并且数据也会回到上一帧的状态

return flow.back()

flow.backTo(key)

获得历史栈中一个关键帧，并返回到这一帧，数据也会同步还原

return flow.backTo("abc")

flow.get(key)

获取一个关键帧，并传递参数

return flow.get("abc", {})

flow.getFirstFrame(data)

获取第一帧

return flow.getFirstFrame({})

flow.getLastFrame(data)

获取最后一帧

return flow.getLastFrame({})

flow.getCurrentFrame(data)

获取当前帧，会增加历史记录。

return flow.getCurrentFrame({})

flow.replayCurrentFrame(data)

重放当前帧，多次重放，不会增加历史记录。通常可以替代getCurrentFrame

return flow.replayCurrentFrame({})

flow.restart(data)

获取第一个帧，并且会重置历史帧记录

return flow.restart({})

flow.isBack(key)

判断当前用户输入是否按了back键

flow.isBack("back") // true
flow.isBack("xxxxxx") // false

flow.startFrom(key, data)

从一个固定位置启动流程

flow.startFrom(flow.get("abx", {}))
// 上下等价，建议用下面的方式
flow.startFrom("abx", {})

flow.start(data)

从第一帧开始启动流程

flow.start({});

flow.push(key, fn)

像flow中添加一帧。

// 添加帧，匿名
flow.push(function(data, flow){})
// 添加个关键帧
flow.push("abc", function(data, flow){});

// 判断关键帧是否存在
flow.has("abc") // true

flow.has(key)

判断关键帧是否存在

flow.has(key)// 返回 true or false

推荐代码组织方式

// api.gs
export testapi(a, b, c){
    return xxxx.api(a, b, c)
}

// pages.gs
export scanDeskCode(a, options){
    return labor.scan("/xxx/xxx.lemo.json", {a}, options)
}


// start.gs
import {Flow} from './lib/flow.gs';
import * as API from './api.gs';
import * as page from './pages.gs';


var flow = Flow();

flow.push(function(data, flow){
    var code = page.scanDeskCode(data.a, {});
  if(flow.isBack(code)){
      return flow.back();
  }
  var res = API.testapi(code, data.a);
  return res;
})

flow.push("p2",function(){
  //...
});

flow.push("p3",function(){
  //...
});


// 流程结束
flow.push(function(){
    labor.release();
});

// 页面分支处理推荐
// function fenzhi1(){
  // 从p3开始继续执行流程
    // flow.startFrom('p3', flow.data)
// }


flow.start();