最近的工作在做一个多步骤多分步的表单页面，这个多步骤多分步的意思是说这个页面的业务是分多个步骤完成的，每个步骤可能又分多个小步骤来处理，大步骤之间，以及小步骤之间都是一种顺序发生的业务关系。起初以为这种功能很好做，就跟tab页的实现原理差不多，真做下来才发现，这里面的相关逻辑还是挺多的（有可能是我没想到更好地办法~），尤其是当这个功能跟表单，还有业务数据的状态结合起来的时候。我把这个功能相关的一些逻辑抽象成了一个组件StepJump，这个组件能够实现纯静态的分步切换和跳转，以及跟业务相结合的复杂逻辑，有一定的通用性和灵活性，本文主要介绍它的功能要求和实现思路。
实现效果：
里面有两个效果页面：demo.html和regist.html，相关js分别是demo.js和regist.js，组件封装在stepJump.js里面，采用seajs做的模块化。demo.html演示的是一个纯静态的多步骤多分步的内容切换，regist.html是一个完整地跟业务结合起来的效果，是我从最近的工作中抽出来的，只不过里面的业务数据状态是用一个常量（STEP_STATUS）来模拟的。
1. 需求分析
前面给的效果图不完整，但是设计图太大，不方便贴出。为了把这个页面的功能要求描述清楚，我只能尽可能地在文字上多花功夫，尽量把每一个细节都讲清楚：
1）这个页面一共有四个大步骤，其中1,3,4都只对应了一个小步骤，而2对应了三个小步骤，也就说1,3,4分别是1步就能完成的，而2需要3步才能完成；
2）这些步骤是顺序发生的关系，必须先完成第1大步，才能进行第2大步；必须先完成第1个小步，才能进行第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 等待审核】有下面3种可能的效果：
