H5 入驻流程发现的问题

需求分析

接到 H5 入驻流程表单后，大致看了下原有逻辑
医生入驻分为三个大表单，分别是：

将新老表单做了对比

• 验证码
• 证件上传
• 签名上传
• 医院科室职称选择

除了单选没有实现、单行输入框的样式有改变，其余理论上都是现有组件可以拿来复用，实现起来应该比较快。

开发阶段

当我看到 Cell 代码的那一刻，意识到事情不是那么简单。

首先看结构与样式：

乍一眼看过去有如下的问题：

• 大量的重复代码
  • 没有封装成可复用的 UI 组件，同样的样式控制需要写三遍，而且每一处写着写着好像还不太一样
• 插槽命名不遵循语义化
  • 出现大量的 group-hd、group-bd、cell-ft、cell-hd，到后来才知道是 header、body、和footer，命名不应该贪图省事，<div> 最常用，怎么不见人家给省略成 <d> 呢
    首先进行组件抽离，下图是抽离后模板代码的对比，样式部分没有任何一行关于 input 与 cell 的样式代码。
    
    

最终抽离出来

• cell-group 单元格 group 主要用于做标题
• cell cell 单元格
• cell-input 单行 input
• cell-avatar 图片上传
• cell-signature 签名上传
• cell-radio 单选
• enter-submit-success 提交完成的状态显示

每一个组件均做到与业务无关，参数接收数据，对外派发事件，不直接操作业务相关状态，无副作用，类似纯函数的思想，对测试代码的编写非常友好。
遇到的其他问题就不展开来细说，放在之前的 MR 中。
另外一个问题是文件的组织比较混乱，同样是页面级别的组件，没有必要抽成两层。


顺带提一下管理后台

总结一下问题

主要问题

• 结构与样式臃肿
  • 大量重复代码
• 页面文件组织不合理
• 数据流混乱
  另外遇到的问题
• 表单验证(不够好用，来的不直接，逻辑照抄都没看懂)
• vuex 处理同步逻辑
  得出的思考
• 对可以用大段粘贴复制来实现的功能进行抽离
  • 抽离 UI/业务 组件
  • 抽离工具函数
  • mixin
• HTML 适当换行，加入注释，提高可读性
• 对高度相似的业务进行抽象整理，配置化实现需求，大大提高业务功能的开发效率
  抛出问题
• 之后遇到这样的模块该怎么做？
• 抽离了组件，如何让大家知道？