随着10月来到中旬,一个季度即将结束,部门为了加强各个开发人员的代码质量(其实为了看看这个季度bug为什么那么多),就组织了一次Code Review(分锅大会)。
于是...
大伙的代码就五花八门了,不过始终贯彻着一个真理 just can run it's ok。
因为是第一次Review感觉受益匪浅,分享给各位小伙伴共同学习进步,因为以下部分会涉及到业务,所以进行了部分更改,有写的不好的地方也欢迎大家指出。
关于变量命名
data:any = [];
data1:any = [];
list:any =[];
list1:any = [];
params = {
pageNum: '1', // 分页的页数
pageSize: '10', // 每页条数
appName: '', // 应用名称
type: '', // 应用类型
useState: '', // 上下架状态
publishState: '' // 发布状态
};
小伙伴们集体输出
"data1,data2,list,list1这真的合适吗?对定义进行语义化命名不香吗?"
被输出的小伙伴
"can run can run"
优化意见
对参数进行语义化命名如tableData,personList等
tableData = [];
personList = [];
....
关于函数
changeDataType(e):void{
if(e.type === 'right'){
const index = this.list.findIndex(item => {
return this.tableData.changeColId === item.colId;
});
let a = this.tableData.changeColId.split('time');
let b = a[0].match(/[a-z]/ig).join('');
a[0] = a[0].replace(b, this.tableData.type);
this.list[index].colId = a[0] + 'time' + new Date().getTime();
this.list[index].type = this.tableData.type === 'number' ? 'Number' : 'String';
// 再删除原本id内容 新建id对应内容
this.listOfData.forEach((item1, index2) => {
item1[this.list[index].colId] = '';
delete item1[this.tableData.changeColId];
});
// 改listOfData1
this.listOfData1.forEach((item1, index2) => {
item1[this.list[index].colId] = {};
item1[this.list[index].colId]['value'] = '';
item1[this.list[index].colId]['key'] = Math.random();
item1[this.list[index].colId]['isShow'] = false;
const data = {};
if (this.tableData.type.includes('text')) {
data['value'] = '';
data['key'] = Math.random();
data['isShow'] = false;
item1[this.list[index].colId] = data;
}
else if (this.tableData.type.includes('number')) {
.....
}
else if (this.tableData.type.includes('source')) {
.....
}
else {
item1[this.list[index].colId] = '这是其他';
}
delete item1[this.tableData.changeColId];
});
// 关闭弹窗
this.typeDialogIsShow = false;
}else {
this.typeDialogIsShow = false;
}
}
小伙伴们输出
1.这个a,b,c的item1的命名是不是不太合适(命名不规范)
2.那么多if else嵌套过两礼拜是不是你也不知道写的啥(if else深度嵌套)
3.遇到复杂的逻辑情况,应该秉持着一个函数只做一件事,进行解耦。
优化意见
if else嵌套问题可以通过使用职责链模式或者表查询使代码更加简洁明了
笔者关于上传图片的表查询示例
// 上传背景图
uploadImg(e, tag) {
//表查询,避免使用if
//img用空字符串 bg-img用none
const setUrlObj = {
'base': (e) => {
this.baseSetObj.bg = e.length > 0 ? e[0].fileurl : 'none';
this.baseSetObj.fileList = e || [];
},
'title': (e) => {
this.topArea.titleBg = e.length > 0 ? e[0].fileurl : '';
this.topArea.titleFileList = e || [];
},
'logo': (e) => {
this.topArea.logo = e.length > 0 ? e[0].fileurl : '';
this.topArea.logoFileList = e || [];
},
'titleBg': (e) => {
this.topArea.bg = e.length > 0 ? e[0].fileurl : 'none';
this.topArea.bgFileList = e || [];
},
'bArea': (e) => {
this.leftArea.headerImg = e.length > 0 ? e[0].fileurl : 'none';
this.leftArea.headerFileList = e || [];
},
'monitorChart': (e) => {
this.leftArea.monitorPic = e.length > 0 ? e[0].fileurl : 'none';
this.leftArea.monitorFileList = e || [];
},
'sortCahrt': (e) => {
this.leftArea.sortPic = e.length > 0 ? e[0].fileurl : 'none';
this.leftArea.sortFileList = e || [];
},
}
if (Array.isArray(e)) {
return setUrlObj[tag](e)
}
}
雪碧大大关于if else嵌套问题有一篇不错的文章
关于运算符使用
async queryGoodsList() {
const {
data
} = await queryGoodsList();
this.goodList = data.shops;
}
小伙伴们输出
如果后台老哥万一出现问题,data给个null,你这页面就报错了,一口锅直接从天而降。
优化意见
使用可选链运算符(?.)和或(||)运算符直接把后台老哥按得死死的
async queryGoodsList() {
const {
data
} = await queryGoodsList();
this.goodList = data?.shops || [];
}
关于注释
//查询商品列表
queryShopList(){
.....
}
//获取文件后缀名
getFileType(url) {
let fileType = url.substring(url.lastIndexOf('.') + 1);
return fileType
}
//存储订单
saveOrderForm(){
...
}
//计算一行能放几个
calculRowNum(boxWidth, margin) {
let width = this.baseSetObj.width - this.leftArea.width;
let rowNum = Math.floor(width / (boxWidth + margin));
return rowNum;
}
//生成随机字符
randomString() {
let chars = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
var result = '';
for (var i = 32; i > 0; --i) result += chars[Math.floor(Math.random() * chars.length)];
return result;
}
//筛选指定数组对象
filterList(list) {
let result = [];
list.map(({ fileName, saveName, dir, systemName }) => result.push({
fileName,
saveName,
dir,
systemName
}))
return result
}
这是笔者写的代码,因为之前无情diss小伙伴,于是小伙们开始反击。
优化意见
小伙伴输出:咋一看每个方法注释都有写,但方法之间应该最好用注释归类
我:有点离谱,但说的确实没错
/* ----------------------------------查询操作开始--------------------------------------- */
//查询商品列表
queryShopList(){
.....
}
/* ----------------------------------查询操作结束--------------------------------------- */
/* ----------------------------------存储操作开始--------------------------------------- */
//存储订单
saveOrderForm(){
...
}
/* ----------------------------------存储操作结束-------------------------------------- */
/* -------------------------------以下为工具类函数-------------------------------- */
//计算一行能放几个
calculRowNum(boxWidth, margin) {
let width = this.baseSetObj.width - this.leftArea.width;
let rowNum = Math.floor(width / (boxWidth + margin));
return rowNum;
}
//获取文件后缀名
getFileType(url) {
let fileType = url.substring(url.lastIndexOf('.') + 1);
return fileType
}
//生成随机字符
randomString() {
let chars = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
var result = '';
for (var i = 32; i > 0; --i) result += chars[Math.floor(Math.random() * chars.length)];
return result;
}
//筛选指定数组对象
filterList(list) {
let result = [];
list.map(({ fileName, saveName, dir, systemName }) => result.push({
fileName,
saveName,
dir,
systemName
}))
return result
}
关于scss文件
scss其实老生常谈,嵌套层次不能超过3层,但实际上...
.flow-container{
width: 718rpx;
@include fa();
flex-direction: column;
.flow-top{
width: 100%;
height: 48rpx;
@include fa();
position: relative;
margin-bottom: 24rpx;
box-sizing: border-box;
padding-left: 32rpx;
.flow-name{
font-family: PingFangSC-Medium;
font-size: 34rpx;
color: rgba(0,0,0,0.85);
}
.flow-more{
display: flex;
right: 32rpx;
position: absolute;
align-items: center;
height: 100%;
.flow-text{
font-family: PingFangSC-Regular;
font-size: 26rpx;
color: #259CE1;
margin-right: 8rpx;
}
.flow-icon{
@include wh(24rpx,24rpx);
}
}
}
.flow-list-container{
@include wh(100%,auto);
}
}
优化意见
嵌套不超过三层
.flow-container {
width: 718rpx;
@include fa();
flex-direction: column;
.flow-top {
width: 100%;
height: 48rpx;
@include fa();
position: relative;
margin-bottom: 24rpx;
box-sizing: border-box;
padding-left: 32rpx;
.flow-name {
font-family: PingFangSC-Medium;
font-size: 34rpx;
color: rgba(0, 0, 0, 0.85);
}
}
.flow-list-container {
@include wh(100%, auto);
}
}
.flow-more {
display: flex;
right: 32rpx;
position: absolute;
align-items: center;
height: 100%;
.flow-text {
font-family: PingFangSC-Regular;
font-size: 26rpx;
color: #259ce1;
margin-right: 8rpx;
}
.flow-icon {
@include wh(24rpx, 24rpx);
}
}
最后
以上其实都是些很基础的问题,但我觉得每个小细节都能做好的话,整体上也不错,每天进步一点,长期下来也会上一个台阶,毕竟懂的人很多,但这么做的人很少。共勉!
