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

如何在JavaScript中实现步进器决策流?,javascript,reactjs,decision-tree,flowchart,stepper,Javascript,Reactjs,Decision Tree,Flowchart,Stepper,实际上,我不确定我要描述的东西的最佳名称。决策流程,决策矩阵,流程图 实现一个基本上是“选择你自己的冒险”步进器的流程,或者一个变成步进器的流程图的最佳方式是什么 例如,您有一个包含步骤的UI,下一步和上一步的显示取决于上一步的数据。现在,我有一个switch语句来决定要出现哪一步,还有一个非常难看的逻辑来决定下一步还是上一步 (我使用React为每个步骤渲染组件,但我认为这与问题无关) renderStep=()=>{ 开关(电流阶跃){ 案例1: 返回 案例2: 返回 案例2.5: 返回 案

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

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

例如,您有一个包含步骤的UI,下一步和上一步的显示取决于上一步的数据。现在,我有一个switch语句来决定要出现哪一步,还有一个非常难看的逻辑来决定下一步还是上一步

(我使用React为每个步骤渲染组件,但我认为这与问题无关)

renderStep=()=>{
开关(电流阶跃){
案例1:
返回
案例2:
返回
案例2.5:
返回
案例3:
返回
案例3.25:
返回
案例3.5:
返回
案例3.75:
返回
案例4:
返回
违约:
返回空
}
}
现在单击“下一步”或“上一步”将发送数据,并确定每个步骤要转到哪个步骤。如果流量是线性的,它将非常容易-更新数据,增量或减量为1。但有了条件流,情况会变得更复杂

goToPreviousStep=()=>{
const{currentStep}=this.state
this.setState(prevState=>{
如果(currentStep==4&&prevState.SomeDataOccessed){
返回{currentStep:prevState.currentStep-0.5}
}否则如果(当前步骤===3.5){
返回{currentStep:prevState.currentStep-0.5}
}否则{
返回{currentStep:prevState.currentStep-1}
}
})
}
可能尝试支持更多的嵌套会更加复杂。随着数据量的增长,我知道它将变得不可维护,但我找不到任何好的资源来将这些数据存储在表中或使其更具程序性。有人能给我指出正确的方向吗


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

你有没有看过类似于链表工作原理的东西?每个步骤都是一个对象,每个步骤都有对其上一个步骤以及潜在下一个步骤的引用。遍历可以通过以下链接完成,当前步骤可以存储为对象,而不是某种数字。如果你想给它们编号,你可以简单地数一数所有的步骤,然后向后移动到第一步,看看你的步骤编号是多少

您可以在步骤原型中放入所需的数据,以便每个步骤都定义呈现它所需的一切,并根据它采取行动,等等。标题、文本、关联的URL等

函数步骤(){}
Step.prototype.previous=null;
Step.prototype.next=[];
Step.prototype.addNext=函数(nextStep){
让step=Object.assign(newstep(),nextStep);
步骤1=此步骤;
这个。下一步。推(步);
}
Step.prototype.getNumber=函数(){
var数=0;
var步骤=此;
while(步骤){
步骤=步骤。上一步;
数字+=1;
}
返回号码;
}
让CurrentStep=null;
函数createSteps(){
const step1=新步骤();
常量步骤2=新步骤();
常量步骤2_1=新步骤();
const step2_2=新步骤();
const step3=新步骤();
当前步骤=步骤1;
步骤1.添加下一步(步骤2);
步骤1.添加下一步(步骤2_1);
步骤1.添加下一步(步骤2_2);
步骤2.添加下一步(步骤3);
步骤2\u 1.添加下一步(步骤3);
步骤2\u 2.添加下一步(步骤3);
}
createSteps();
log(CurrentStep.getNumber());
console.log(CurrentStep.next[0].getNumber());
console.log(CurrentStep.next[1].getNumber());

console.log(CurrentStep.next[2].getNumber())Javascript与这里的任何其他语言没有区别,可能更强大。但正如你所说。忘记表示层。您需要数据(JSON)和一个基本的
规则
类。从那里,您可以派生和创建更复杂的规则。最基本的是一个处理步骤。更复杂的是IF规则。清单还在继续。@Bibberty假设每一步都是由获取数据的新API调用决定的,下一步是由该API数据决定的……我无法提前构建JSON。这种方法仍然有效吗?Tania,您构建了一组类,从基类开始,该类接受来自父类的数据,并在派生类中执行逻辑。这反过来又基于实现的逻辑影响数据并调用其一个或多个子项。这看起来是一个不错的方法。仍然有很多逻辑来确定要移动到哪一步,但是确定要选择的下一步或上一步比减法和加法更好。5…在这个例子中,你如何“转到(有条件的)下一步”呢?你所说的(有条件的)下一步是什么意思?你能说得更具体些吗?不幸的是,这种方法的“先前”有一个问题
step1.addNext(step2)
将生成step2->step1的上一个,然后
step1.addNext(step2_1)
将生成step1->step1的上一个,然后
step3.addNext(step3)
将生成step3->step2的上一个,这意味着如果你从第2步开始到第3步,它将假设你从第2步开始到第1步。谢谢,@flagoworld,我最后做了类似的事情,并使用了一个数组作为前一步。这很有帮助。