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

问题描述 投票:3回答:1

我实际上不确定我要描述的名字的最佳名称。决策流程,决策矩阵,流程图...

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

例如,您有一个包含步骤的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
    }
  }

现在单击“下一步”或“上一步”将发送数据,并确定每个步骤要执行的步骤。如果流是线性的,那将非常容易-将数据更新,增加或减少1。但是有了条件流,它变得更加复杂。

  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 }
      }
    })
  }

潜在地尝试支持更多的嵌套将更加复杂。随着这种情况的增长,我知道它将变得难以维护,但是我找不到任何好的资源来将数据存储在表中或使其变得更具编程性。有人可以指出我正确的方向吗?

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

我实际上不确定我要描述的名字的最佳名称。决策流程,决策矩阵,流程图...实现流程的最佳方法是基本上是“选择自己的...

javascript reactjs decision-tree flowchart stepper
1个回答
1
投票

您是否看过类似于链表的工作原理?每个步骤都是一个对象,每个步骤都引用其上一步以及可能的后续步骤。可以通过以下链接进行遍历,并且当前步骤可以存储为对象而不是某种数字。如果您想对它们进行编号,您可以简单地计算所有步骤,然后向后移动到第一步以查看所使用的步骤编号。

© www.soinside.com 2019 - 2024. All rights reserved.