订单业务重构 谈谈大组件的拆分

Question

最近半年对两个业务系统进行了重构升级，重构前的代码都是几千行的业务逻辑。在做业务迭代的过程中考虑到开发的难度和后续的维护，于是对就有组件进行了重构。经过重构将大文件组件进行拆分，方便了后续的扩展和维护。

业务背景

部门负责的业务中包含一个订单系统，该系统内部包含多种角色，10 余种订单状态，约 30 种订单操作。业务的前端页面由订单列表和订单详情两个主要组件构成，且订单详情页面展示时覆盖在订单列表上，并未使用独立页面。

由于历史原因和不断的迭代，造成页面组件的代码行数几千行，且订单详情组件拥有多种自定义状态。

由于版本迭代，页面 UI 需要进行调整，订单流程需要精简。结合当前的代码状况，于是决定进行重构。

重构过程

1. 针对订单操作进行拆分

将每个操作抽离成单独的就是

function checkValid(){}
function actionHandle(){}

export default {
	label: '订单操作'， 
	style: ''，
	valid: checkValid,
	handle: actionHandle,
}

将每个操作定义成如上数据结构，存入操作的数组中。然后在列表中直接传入 当前行的数据，执行每个操作的 valid 的方法，过滤出适合当前行数据的操作。
定义好相关的订单操作后，在列表组件中 ,

const actionList = [...]

export default {
	created() {
		actionList.map(action => {
			action.valid = action.valid.bind(this)
			action.handle = action.handle.bind(this)
		})
		this.actionList 
	},
	methods: {
		getValidActionList(order) {
			return this.actionList.filter(action => action.valid(order))
		}
	}
	
}

这一块的逻辑也可以单独放在 mixin 里面，之前有一个业务 列表有两种展示方式，卡片和普通列表。像这种情况我们把操作抽离出来，最后混入到对应的列表和卡片组件中即可。

上述的操作还存在一个问题，就是操作的实际点击事件，很多都会包含视图的变化，弹一些弹窗之类的。

如果按照普通的逻辑，将弹窗定义在 列表组件中，然后再维护弹窗显示的状态，整个列表组件还是臃肿，而且视图和逻辑分离，不利于代码的阅读。

这里我使用了 Vue.extend , 将所有的弹窗组件都封装成函数，将 props 时通过函数参数进行传入，将弹窗完成的操作通过 props 定义的回调函数进行传出。

通过这种代码结构，我们把操作完全抽离，实现了十分合理的解耦

订单详情改造

之前版本的订单详情展示时是覆盖在订单列表上面的，这导致在详情时刷新页面时会展示为订单列表页面，这种实现和业务交互是不太合适的。

订单详情页面之前包含 订单发单， 订单审核，订单详情 逻辑。组件的自定义状态过多，视图展示在不同状态的也有差异。因此整体详情的逻辑还是比较混乱的。

因此在重构时，我将发单，详情，审核的逻辑抽离为单独的组件，通过不同的路由进行分发。对于试图相同的部分抽离为组件。

将这个大组件拆分成各种逻辑的独立组件后，代码可读性高了很多。在平时的业务开发中，我们也应该注意业务组件公用。在视图的重合比例较高且业务逻辑较为简单时，将组件进行公用是 OK 的，更多的时候拆分为独立组件对于后续的维护和迭代好处更大

写在最后

最后终结下大组件的拆分吧。

1. 可以通过 mixin 和 Vue.extend 对业务逻辑进行抽离
2. 将多状态组件抽离为多个单状态组件

重构的还是有一定风险的，重构过程中不能一蹴而就。一部分一部分的进行重构，写完之后及时测试，保证业务逻辑的正确。全部开发完成后也需要进行回归测试。业务开发时， 屎山上拉屎 是一种妥协。如果时间允许且对于业务和自己有益处的话，还是推荐重构的。