记一次前台项目重构要点总结

什么项目，为何会重构？

项目是公司主打业务产品之一的可视化子项目，与其余子项目几乎没有耦合，所以可以单独拎出来重构。

具体业务不作形容。技术主要用的是Vue2系列和JavaScript，还有一个自研的可视化工具库。第一个重构起因就是没有引入静态类型，导致查看一个对象结构需要翻来覆去在多个文件中查找。第二是由于之前新添加代码模式一般为：“来一个需求加一段代码”，长期积累导致代码结构混乱，可读性差。第三是各个状态板块耦合度高，加大了代码维护难度。

怎样重构的？

一、在JavaScript中使用TypeScript。“什么？在JS中使用TS? 闻所未闻。 ” 在看到TS官网手册最后一条”Type Checking JavaScript File”?之前，我也这样想。其实，TS和VSCode（一款IDE）结合，也可以实现静态类型检测，只不过使用注释形式，一样支持tsconfig.json?和自己设置Typing。

typeTypeApple = { name:string, count:number}

/** @type {TypeApple} */constapple = { name:’foo’, count:100}

二、细化板块分类。一般情况下，板块都会有耦合。但假如耦合渡过高，往往是由于板块没有细分到位。假如细化板块？举例，如果有一个板块叫Operation?，里面既包含操作相关逻辑，也有操作面板逻辑。随着业务发展，操作面板逻辑越来越多。我们完全可以将操作面板逻辑单独抽成一个板块OperationPanel?。

三、解耦可视化库和Vue/Vuex。写业务的时候，很容易由于方便，在Vue组件或者Vuex板块中代码越写越长，越来越难维护。这个项目也不列外。所以重构的时候，单独将可视化库喜爱那个管逻辑抽成板块，并使用类Vuex写法(state, getters, mutations, actions)进行管理。

classCounter{// # state? /** @type {number} */count =0// # gettersgetcountText() {return`Countis: ${this.count }` }// # mutations/** @param {number} count*/SET_COUNT = count => {this.count = count }// # actions/** @param {number} count*/logCount = ( count ) => {this.SET_COUNT( count )? ? console.log(this.countText )? }}

四、最后一条，编写可维护性高的代码。这里说两个方法。

第一个是“使用Map?”。解决“一个有多类型的数据”需要使用判断，常见有3种方法：If?,Switch?,Map?。If?的使用简单粗暴，容易了解。

if( animalType ===’dog’) {? ? console.log(‘Wang!’)}elseif( animalType ===’cat’) {? ? console.log(‘Miao!’)}elseif( animalType ===’bird’) {? ? console.log(‘Jiu!’)}

Switch?可以看做是If?的简化。

switch( animalType ) {case’dog’:console.log(‘Wang!’)breakcase’cat’:console.log(‘Miao!’)breakcase’bird’:console.log(‘Jiu!’)break}

而Map?针对性最强，并且最简洁、最易于维护。

const logMap = {? ? dog:()=>console.log(‘Wang!’),? ? cat:()=>console.log(‘Miao!’),? ? bird:()=>console.log(‘Jiu!’),}logMap[ animalType ]()

具体使用也哪一种因场景而异，但多数场景下，使用Map?可读性更强。

第二个是“使用getters和mutations”。比方定义一个板块的：?operationGetters.js`, 里面提供各种用来获取与操作有关的常量和方法。

exportconstOPERATION_TYPE_A =0exportconstOPERATION_TYPE_B =1exportconstOPERATION_TITLE_MAP = {? [ OPERATION_TYPE_A ]:’Title A’,? [ OPERATION_TYPE_B ]:’Title B’,}exportconstgetOperationTitleByType =type=>OPERATION_TITLE_MAP[ type ]

定义mutations?则是定义一个提供相关各种变更数据方法的文件。在维护代码的时候，查找变更方法名就可直接找到更改数据的出处。

exportconstSET_OPERATION_TITLE =( operation, title ) =>{ operation.title = title }

重构前后比照

代码量减少了快一半，性能明显提升，最重要的是代码可读性、可维护性大大加强，从而淡定从容应对之后的新需求。

假如有想学习编程的初学者，可来我们的前台直播授课群的哦：571671034里面免费送整套系统的前台教程！