如何在 JavaScript 中实现步进式决策流程？

Question

我实际上并不确定要描述的内容的最佳名称。决策流、决策矩阵、流程图……

实现基本上是“选择你自己的冒险”步进器的流程或将流程图变成步进器的最佳方式是什么？

例如，您有一个带有步骤的 UI，而将显示的下一步和上一步取决于上一步中的数据。现在，我有一个 switch 语句来确定要出现的步骤，以及非常丑陋的逻辑来确定应该是下一步还是上一步。

（我正在使用 React 为每个步骤渲染组件，但我认为这与问题无关）。

renderStep = () => {
    switch (currentStep) {
      case 1:
        return <FirstStep/>
      case 2:
        return <SecondStep />
      case 2.5:
        return <SecondStepA />
      case 3:
        return <ThirdStep />
      case 3.25:
        return <ThirdStepA />
      case 3.5:
        return <ThirdStepB />
      case 3.75:
        return <ThirdStepC />
      case 4:
        return <FourthStep />
      default:
        return null
    }
  }

现在单击“下一步”或“上一步”将发送数据，并确定每个步骤要转到哪个步骤。如果流是线性的，那将非常容易——更新数据，递增或递减一。但是使用条件流，它变得更加复杂。

  goToPreviousStep = () => {
    const { currentStep } = this.state

    this.setState(prevState => {
      if (currentStep === 4 && prevState.someDataHappened) {
        return { currentStep: prevState.currentStep - 0.5 }
      } else if (currentStep === 3.5) {
        return { currentStep: prevState.currentStep - 0.5 }
      } else {
        return { currentStep: prevState.currentStep - 1 }
      }
    })
  }

如果尝试支持超出此范围的其他嵌套可能会更加复杂。随着它的增长，我知道它将变得无法维护，但是我找不到任何好的资源来将这些数据存储在表中或使其更具程序性。有人能指出我正确的方向吗？

不确定我是否必须写一些非确定性的有限自动机之类的......

Answer 1

您是否看过类似于链表的工作原理的东西？每个步骤都是一个对象，每个步骤都引用其上一步以及潜在的下一步。遍历可以通过这些链接完成，并且当前步骤可以存储为对象而不是某种数字。如果你想给它们编号，你可以简单地计算所有的步骤，然后向后遍历到第一步，看看你在哪个步骤编号。

您可以在 Step 原型中放入所需的尽可能多的数据，以便每个步骤定义渲染它所需的一切，基于它采取行动等。标题、文本、关联的 url 等。

function Step() {}

Step.prototype.previous = null;
Step.prototype.next = [];

Step.prototype.addNext = function(nextStep) {
  let step = Object.assign(new Step(), nextStep);
  step.previous = this;
  this.next.push(step);
}

Step.prototype.getNumber = function() {
  var number = 0;
  var step = this;
  
  while(step) {
    step = step.previous;
    number += 1;
  }
  
  return number;
}


let CurrentStep = null;
function createSteps() {

  const step1 = new Step();
  const step2 = new Step();
  const step2_1 = new Step();
  const step2_2 = new Step();
  const step3 = new Step();
  
  CurrentStep = step1;
  
  step1.addNext(step2);
  step1.addNext(step2_1);
  step1.addNext(step2_2);
  
  step2.addNext(step3);
  step2_1.addNext(step3);
  step2_2.addNext(step3);

}

createSteps();

console.log(CurrentStep.getNumber());
console.log(CurrentStep.next[0].getNumber());
console.log(CurrentStep.next[1].getNumber());
console.log(CurrentStep.next[2].getNumber());