嗯,最近pc更新了一版,目前没有什么活,就检查自己写的代码,去优化,发现有一个函数if嵌套了很多层,重复的代码也有很多,所以我就把重复的进行来了提取,以及一些其他优化
原代码
可以看到很多代码都重复,而且if嵌套也很多,
javascript
const handleEdit = async (data: any) => {
if (data.deviceType === 'Host') {
items.value = [defaultStep, ...hostSteps];
editSelectType.value = 'C04A01';
editDeviceType('C04A01');
editCurrent.value = 1;
editDataHost.value = data;
oldHostData.value = deepCopy(data);
if (data.sceneList.length > 0) {
data.sceneList.forEach((item: any) => {
selectScene(item.id, item, 'host');
selectSceneHasRoom(item.id);
});
}
} else {
items.value = [defaultStep, ...editBoxSteps];
editSelectType.value = 'C04A02';
editDeviceType('C04A02');
editCurrent.value = 1;
editDataBox.value = data;
initialFormData.value = deepCopy(data);
initProjectHostList();
initBoxProperty();
initControllerType();
if (data.sceneList.length > 0) {
data.sceneList.forEach((item: any) => {
selectScene(item.id, item, 'box');
selectSceneHasRoom(item.id);
});
}
if (data.children == null) {
editDataBox.value.children = [];
editBoxController();
}
if (editDataBox.value.children) {
const res = editDataBox.value.children;
console.log(res);
res.forEach((chl: any) => {
selectController(chl.userTypeId);
if (chl.itemDeviceTypePropertyDTOList.length === 0) {
chl.itemDeviceTypePropertyDTOList.push({
propertyId: undefined,
deviceCount: 0,
});
}
});
}
}
editVisible.value = true;
getControllerModelList({ deviceTypeId: editDataHost.value.typeId }).then((res) => {
if (res.code === 200) {
controllerModelList.value = res.result;
}
});
};
看完这段代码,你有想到这段代码应该怎么优化,减少代码量吗?我觉得你应该有想法了吧!
这是对这段代码优化的建议
类型安全性:确保对函数和变量的参数和返回类型进行正确的类型定义。这可以在开发过程中帮助捕获错误。
避免魔术字符串 :不要硬编码字符串,如
'Host'
和'C04A01'
,考虑使用常量或枚举来提高可读性和可维护性。避免重复代码 :处理
sceneList
存在重复模式。您可以将此提取为单独的函数,以避免冗余。使用
Promise.all()
进行并行请求 :如果getControllerModelList
与其他异步任务无关,可以使用Promise.all()
并行获取数据。错误处理:确保对承诺进行适当的错误处理,以捕获在 API 调用过程中可能出现的任何错误。
一致的命名约定:确保变量名遵循一致的命名约定,以提高可读性和可维护性。
使用解构:当访问对象的属性时,考虑使用解构来简化代码。
尽量减少副作用 :像
editDeviceType
和editBoxController
这样的函数似乎有副作用。确保这些副作用得到充分记录和控制。
这是修改优化的代码,把重复的代码都写到了setDataAndInit 这个函数,并且
const isHost = data.deviceType === 'Host'; const deviceType = isHost ? 'C04A01' : 'C04A02';使用了这俩给判断去避免魔术字符串使用
javascript
const handleEdit = async (data: any) => {
const isHost = data.deviceType === 'Host';
const deviceType = isHost ? 'C04A01' : 'C04A02';
const setDataAndInit = () => {
items.value = [defaultStep, ...(isHost ? hostSteps : editBoxSteps)];
editSelectType.value = deviceType;
editDeviceType(deviceType);
editCurrent.value = 1;
initialFormData.value = deepCopy(data);
if (data.sceneList.length > 0) {
data.sceneList.forEach((item: any) => {
selectScene(item.id, item, isHost ? 'host' : 'box');
selectSceneHasRoom(item.id);
});
}
};
if (isHost) {
editDataHost.value = data;
oldHostData.value = deepCopy(data);
setDataAndInit();
} else {
editDataBox.value = data;
setDataAndInit();
initProjectHostList();
initBoxProperty();
initControllerType();
if (!data.children) {
editDataBox.value.children = [];
editBoxController();
} else {
const { children } = editDataBox.value;
children.forEach((chl: any) => {
selectController(chl.userTypeId);
if (chl.itemDeviceTypePropertyDTOList.length === 0) {
chl.itemDeviceTypePropertyDTOList.push({
propertyId: undefined,
deviceCount: 0,
});
}
});
}
}
editVisible.value = true;
// 获取控制器模型列表
try {
const res = await getControllerModelList({ deviceTypeId: editDataHost.value.typeId });
if (res.code === 200) {
controllerModelList.value = res.result;
} else {
// 处理错误
}
} catch (error) {
// 处理错误
}
};
只是记录并分享一下,感觉没有什么技术含量,就是把重复代码提取出来了