问题分析
要重构考勤页面，使之结构更清晰，更易读易维护，我分析了一下考勤页面存在的问题：
考勤页面的最主要的问题不是具体代码写的好不好，而是层次和模块划分的不好。本来是层次化、模块化的结构，硬生生的堆到了一起，而且模块之间的边界也不清晰。
如图，一个页面组件模板就有这么多的内容，这样这个页面组件的可读性和可维护性可想而知。
而且options中也有getters、mutations、actions的扁平化导致的不清晰。
重构方案
重构的整体思路就是把扁平的结构变得有层次，每层不同模块职责边界也很清晰。
主要分组件和store还有具体的逻辑代码3方面去重构，组件和store都是为了通过层次和模块划分使之结构清晰、职责边界明确，而具体逻辑代码的重构主要是抽取公共逻辑，合理封装，简化代码。
组件重构
考勤页如图所示，按照功能划分为StudentList组件、ClassInfo组件，同时StudentList细分了StudentListItem组件。
从数据方面来看，StudentList使用学生数据，ClassInfo使用课堂和教师数据，两者没有交集。
Store重构
1. store目录结构拆分
store层现在也是扁平化的结构，我们也要通过分类存放来使得代码更清晰，分成page、components、domain、other4个文件夹。
因为考虑到测试量，所以我们目前只改动考勤模块。
其中allStudentList因为是全局都会使用的实体数据，可以放入domain中去。
2.module添加namespace
现在组件中的getters、mutations、actions都是把所有使用到的都扁平化的堆放在一起，很难分清哪个属于哪个module。通过添加namespace改成如下写法：
mapActions('aaa', {
action1: 'action111a',
action2: 'action111b'
}),
mapActions('bbb', {
action1: 'action222a',
action2: 'action222b'
}),
哪个getter、mutation、action属于哪个module一目了然。
3.mutation type和action type使用枚举常量
mutation type和action type取值范围是一些离散的有限数量的值，为了防止写错，可以通过枚举常量统一约束。
通过我之前写的vuex插件，来处理module导出的 mutationTypes和actionTypes，然后挂载到store实例上。
export default{
state,
getters,
mutations,
actions,
mutationTypes,
actionTypes
}
使用时可以这样写
mapActions('aaa', {
'action1': this.$store.actionTypes.aa.action1,
'action2': this.$store.actionTypes.aa.action2,
})
mapActions('bbb', {
'action1': this.$store.actionTypes.bb.action1,
'action2': this.$store.actionTypes.bb.action2,
})
如果需要导入一个module的全部actions、mutations，可以简写为：
mapActions('aaa', this.$store.actionTypes.aa),
mapActions('bbb', this.$store.actionTypes.bb),
具体逻辑的调整
代码中有很多应该拆出来的地方没有拆出来，比如actionCreator、mutationCreator，比如可以通过埋点指令简化的埋点逻辑等。可以优化的地方有很多。
总结
为解决考勤页面难维护的问题而进行重构，分析后发现，问题是因为组件的模板、store层的module、组件里getters/mutations/actions等应该是有层次和模块的划分的结构，都扁平的堆放到了一起，并且组件的具体逻辑中也有很多业务无关的代码可以抽取。
具体的重构方案就是针对组件、store的module、组件里actions/mutations/getters进行层次和模块的划分，同时抽取组件中的业务无关的一些逻辑和通用的可复用的逻辑。
重构涉及到store、组件的模板和vm3部分的全面改动。
文章结构图
网友评论