调查问卷系统架构设计方案

需求：

前端问卷系统需要一套高可复用、灵活性的组件设计来满足问卷系统的UI变化同时最大化简化整个前端系统的开发速度。

要求：

1. 对于UI组件既能满足特定的UI设计，同时也能最大化可重复使用

2. 对于数据要求能够与后端返回的数据结构相脱离，同时也能够满足对于相应数据结构所要求的功能， 例如：跳题、表单校验、题目动态切换等功能。

3. 能够基于调查问卷的一些动作来实现相应的辅助功能，例如：问卷进度条显示、题目显示/隐藏动画等。

实现方案：

为实现上述要求对于调查问卷系统设计理念，设计两个核心模块：

• UI层： 负责问卷具体UI的展示，数据结构向 -> UI的映射

• 行为层： 负责行为捕捉到 -> 响应动作的执行

设计架构图：

UI层：

SurveyUnit组件为动态组件，负责数据层向UI层的映射，同时接收数据变化，反馈给后台数据结构。 UI层包括单选、多选、输入等等具体表单组件，这些组件针对具体组件UI实时开发。

行为层：

SurveyAction 组件为高阶组件，负责监听UI层数据变化并执行相应动作，此组件可相互嵌套, 为某一组UI执行特定动作。同时此组件也可作为基成组件衍生高级组件来执行特定动作 行为层包括 SurveyAction、SurveyAction-Input、SurveyAction-Step等组件。

总结：

整体设计流程通过将UI层与行为层分离来实现高度的灵活与可定制化操作，UI层可针对不同的UI进行实时开发，而行为层通过高阶组件与相互嵌套来实现行为动作的组装和拆卸。两者互相融合，相互独立。 在具体开发过程中时间主要花费在架构体系的设计与具体实现细节上面，在经过几轮的优化与调整后，目前对于整体的体系设计较为满意。