一、重构背景
开票app模块时间久远，随着业务需求的不断演变和技术的持续迭代，经多人修改后代码变得冗余、复杂，难以维护，这些代码不仅影响系统的运行效率，增加故障发生的风险，还阻碍了新功能的快速开发和部署。基于此立下本年度重构的目标，虽无法一次性重构所有页面，但可以将重构计划分摊到每个相关的特性中，采用“蚂蚁搬家”的方式，积硅步，达目的，以致千里。
二、重构目标
- 代码结构清晰：模块划分合理，职责明确，易于理解和维护。
- 冗余逻辑减少：代码量减少约30%，复用率提高，降低了维护成本和出错风险。
- 解决技术债务：重构完成后开票小程序和app两套代码要二合一
三、重构过程
1. 代码审计与梳理
首先，我对“可开票订单”界面的现有代码进行全面审计，理清其业务逻辑和模块间的交互关系，通过绘制思维导图，可视化地呈现出本界面的主要变量和方法，为后续优化提供依据。
2. 重构设计
基于代码梳理结果，我们制定了重构计划，按照业务逻辑重新划分模块，分为一个主页面和六个子组件，明确每个模块的职责边界，遵循单一职责原则，并发起详细设计评审。
兄弟之间通过总线bus传递消息，父传子通过自定义属性传递消息，子传父通过自定义事件传递消息，多个组件用到的数据通过vuex存储并管理
3. 实施重构
- 实现静态组件：创建组件，将原来的html和css粘贴进去，并进行优化
- 展示动态数据：确定各个数据保存在哪个组件，为静态组件绑定数据
- 绑定事件监听：实现各个组件的业务逻辑和交互
4. 自测
重构完成后，我们按照思维导图和场景核查表进行自测，确认新界面满足业务需求，并发起代码评审。
四、重构成果
TicketAdd.vue页面代码行数从近两千行缩减到了四百行，只保留了主体的逻辑和结构
TickedAddHeader代码行数：54
TickedAddMain代码行数：216
TickedAddFooter代码行数：178
TickedAddExplainDialog代码行数：85
TickedAddNotTicketDialog代码行数：41
TickedAddSelectDialog代码行数：93
代码总行数比之前缩减了一半，结构条理分明，几乎所有方法行数控制在20行以内，且按规范注释，有利于后续的维护，为app和小程序合二为一打好基础。
