4

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

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

例如，您有一个带有步骤的 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 }
      }
    })
  }

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

不知道我是否必须写一些不确定的有限自动机或其他东西......

4

1 回答 1

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());

于 2019-12-04T18:07:12.947 回答