【超好用的前端表单辅助功能】

最近做了一个复杂的表单，涉及到的技术点如下：

• 根据模块自动生成目录+锚点定位
• 表单需要严格的校验规则+异常错误提示+定位回滚
• 选择不同的类型需要重组不同的模块展示，并整合数据传给后端

实现过程：

1. 根据模块自动生成目录+锚点定位

页面：

• 根据主体类型不同，集合不同的模块，自动生成目录
• 点击目录不同模块，锚点定位

自动生成目录组件代码链接：https://github.com/oilpastell/createTOC

2. 描点定位+动态组件

• 使用动态组件，结合业务场景，杜绝频繁使用v-if，及其便捷的控制了相关组件的显示和隐藏

3. 隔离组件，组件内部实现校验逻辑，交给提交按钮统一处理

• 隔离每个模块的组件，将常用的集中处理数据的方式变为交由组件内部处理逻辑，最外层只负责下发接口，这种方式降低了业务之前的耦合性，也便于后期迭代。
• 子组件用promise封装校验方法，进行参数组装和异常抛出，父组件集中处理结果。
• 通过scrollIntoView方法，根据类名定位，进行异常抛出滚动。

4. 选择不同的类型需要重组不同的模块展示，并整合数据传给后端

• 不再是零落散乱的随处定义数据，和后端沟通好数据结构，后端将数据打包传给前端，前端也可以将数据打包传给后端，数据传输方式清晰明了，避免了数据之间的耦合和互相影响，也便于后期迭代。

附件：