我的位置：ljn1998codeing.love
前言
在这个月我们部门接了另一个部门的一个项目，在拿到代码的那一刻开始我就想说 好家伙，这个项目是两个项目融合在一起。下面我先说说这个项目中存在的问题：
- 项目中使用多个UI组件库，element、antd-vue。所遇到的问题是两个组件库部门组建功能和方法冲突，例如 Message、confirm方法，前一个组件会覆盖后面的组件导致方法调用错误。
- 代码嵌套太深（这里指超过4层），导致可读性差、可维护性差等等问题。
- 代码中没必要的注释多，例如一页代码500行，中间一大段代码被注释掉并无写明原因。所以这段注释的代码删了又怕他用到，不删又碍眼。
- 代码命名不规范（感觉像临时工），a1、a2、b1、b2这种命名。
解决方法
问题一（多组件库冲突）
原代码中 element 和 antd-vue的引入方式都是全局引入，直接在 main.js 中全局 use，因此会造成后面组件库的方法覆盖掉前面组件库同名的方法。
我的解决方法是将 antd-vue 按需引入
// 安装 babel-plugin-import
yarn add babel-plugin-import -D
// 配置 babel.config.js
module.exports = {
presets: ["@vue/app"],
plugins: [
[
"import",
{ libraryName: "ant-design-vue", libraryDirectory: "es", style: 'css' },
],
],
};
// 创建 antdUIConfig.js，在这里把antd-vue所有的组件不包括 Message、Confirm引入进来
// 最后在main.js中运行该文件即可解决UI组件库冲突
问题二（代码深嵌套）
回调地狱
getData1(data1 => {
getData2(data2 => {
getData3(data3 => {
getData4(data4 => {
getData5(data5 => {
do(data1, data2, data3, data4, data5)
})
})
})
})
})
解决方法
Promise
Promise 改写代码，串行异步链式调用
let data1, daat2, data3, data4, data5;
getData1().then(data => {
data1 = data;
return getData2();
}).then(data => {
data2 = data;
return getData3();
}).then(data => {
data3 = data;
return getData4();
}).then(data => {
data4 = data;
return getData5();
}).then(data => {
data5 = data;
do(data1, daat2, data3, data4, data5);
})
但是要注意上面 getData 这些方法返回值必须是 Promise
还可以这样做
Promise.all([getData1, getData2, getData3, getData4, getData5])
.then(([data1, daat2, data3, data4, data5]) => {
do(data1, daat2, data3, data4, data5)
})
async/await
使用 async/await 来操作让代码可读性更强
async getAllData() {
let data1 = await this.getData1();
let data2 = await this.getData2();
let data3 = await this.getData3();
let data4 = await this.getData4();
let data5 = await this.getData5();
do(data1, daat2, data3, data4, data5);
}
多if嵌套
多条件判断 if-else-if
const clickHandler = (status) => {
if(status === 1) {
do1()
} else if(status === 2) {
do2()
} else if(status === 3) {
do3()
} else if(status === 4) {
do4()
} else if(status === 5) {
do5()
} else {
do()
}
}
解决方法
switch 使用 switch 优化比 if-else-if清晰多了，可读性更强
const clickHandler = (status) => {
switch (status) {
case 1:
do1();
break;
case 2:
do2();
break;
case 3:
do3()
break;
case 4:
do4();
break;
case 5:
do5();
break;
default:
do();
break;
}
}
问题三、问题四（冗余注释、命名不规范）
对于这个问题就是真的头疼了，我的方法是，慢慢review代码并且一点一点修改（最费力的方法）。这也是没办法的办法了，要不然组内成员协同开发时组内成员搞不明白，或者照做可就麻烦了🤦♂️
最后
对于代码规范要求不严格的公司来说，接手别人的代码真的是很难的一件事，如果不加以约束，就真的慢慢成为💩山。前人挖坑后人跳。
所以各位小伙伴们在开发时尽量规范些
最后祝各位生活愉快😊
