多步骤多步骤JS中StepJump组件实例的详细说明

最近的工作是制作一个多步骤多步骤的表单页面。这种多步骤、多步骤意味着这个页面的业务是分多个步骤完成的，每个步骤都可以分多个小步骤处理。大步骤和小步骤之间的业务关系是一种顺序业务关系。一开始我觉得这个功能很好做，类似于tab页的实现原理。做了之后发现相关的逻辑还挺多的(可能是没想到更好的方法~)，尤其是这个功能结合表单和业务数据的状态的时候。我把与这个功能相关的一些逻辑抽象成一个组件StepJump，可以实现纯静态的分步切换和跳转，以及与业务相结合的复杂逻辑，具有一定的通用性和灵活性。本文主要介绍其功能需求和实现思路。

达到效果：

有两个效果页面：demo.html和regist.js，相关的js有demo.js和regist.js，组件封装在stepJump.js中，由seajs进行模块化。Demo.html演示了一个纯静态的多步骤、多步骤的内容切换，regist.html是一个结合业务的完整效果，这是我从最近的作品中提炼出来的，只不过里面的业务数据状态是用一个常量(STEP_STATUS)模拟的。

1.需求分析。

以上给出的效果图不完整，但设计图太大，无法张贴。为了清晰地描述这一页的功能需求，我只能在文字上花尽可能多的功夫，让每一个细节都尽可能清晰：

1)本页有四个主要步骤，其中1、3、4都只对应一个小步骤，而2对应三个小步骤，也就是说1、3、4可以一步完成，而2需要三个步骤。

2)这些步骤按顺序发生，必须先完成第一个大步骤，才能进行第二个大步骤；必须先完成第一个小步骤，然后才能进行第二个小步骤。

3)每个大步骤的第一个小步骤可能有一个按钮返回到上一个大步骤；

4)小步骤中间的每个大步骤可能有2个按钮，一个返回上一个小步骤，另一个跳转到下一个小步骤；

5)每个大步骤的最后一个小步骤可能有一个按钮可以跳到下一个大步骤；

6)如果一大步只包含一小步，那么它既是第一小步，也是最后一小步；

7)每个大步骤和每个小步骤要显示的内容不同，一次只能显示一个小步骤；

8)已完成的主要步骤、正在进行的主要步骤以及未来要执行的主要步骤，应该有不同的UI效果；(但是，在实现效果上，已经完成的和正在执行的都有效果。)

9)下一个要执行的大步骤，必须通过上一个大步骤最后一个小步骤中的按钮点击后才能跳转；已经完成和正在执行的主要步骤可以通过点击步骤名称进行跳转；

10)当你点击大步的名字时，跳到大步的第一个小步骤。

以上部分是页面的静态功能分析，以下是页面的实际业务需求：

1)本页面对登录用户开放，用于申请某个平台。只有完成这个签到流程，才能正式进入平台使用其他功能；

2)主要业务数据均与用户相关。根据签到流程，用户的签到流程状态可分为：

A.对于需要填写的数据，如果每次进入该页面都是这个状态值，那么就会显示大步骤【1签到通知】，表示该步骤正在进行；

B.对于要提交的数据，如果每次进入此页面都是这个状态值，那么会显示大步骤【2公司信息提交】，默认显示小步骤中的第一步；

C.审核失败。如果每次进入此页面都是这个状态值，则会显示【3等待审核】的大步骤。

D.批准已经通过。如果每次进入此页面状态值都是这样，则会显示【3等待审批】的大步骤。

E.对于需要确认的合同，如果每次进入此页面都是这个状态值，那么就会显示大步骤【4合同签订】；

3)需要注意的是【3待审批】和【4合同签订】分别包含3项和2项内容，它们各自的内容是互斥的，但不是一步一步的关系，具体展现完全由业务状态决定。例如，[3等待批准]有以下三种可能的影响：

从【2公司信息提交】跳转到【3待审批】时，会显示第一个效果。如果以批准状态进入页面，会显示第二种效果；如果进入页面，第三种效果会以审核失败的状态显示，这种情况下，步骤名称也有特殊效果要求：

直接点击步骤名称时，例如点击【2公司信息提交】，此效果将恢复为默认效果；当你点击[3等待审批]时，你必须再次设置这个特殊效果；只有通过【2公司信息提交】的小步骤跳转到【3待审批】才能完全撤销这个特效。

总的来说，需求只是以上几个部分，可能还有一些细节没有描述。因为不容易用文字解释清楚，只能根据实际效果来实现。就最终实现而言，在前面的需求中，静态函数。