前端代码优化

本文主要是介绍前端代码优化，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

嗯，最近pc更新了一版，目前没有什么活，就检查自己写的代码，去优化，发现有一个函数if嵌套了很多层，重复的代码也有很多，所以我就把重复的进行来了提取，以及一些其他优化

原代码

可以看到很多代码都重复，而且if嵌套也很多，

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;}});
};

看完这段代码，你有想到这段代码应该怎么优化，减少代码量吗？我觉得你应该有想法了吧！

这是对这段代码优化的建议

1. 类型安全性：确保对函数和变量的参数和返回类型进行正确的类型定义。这可以在开发过程中帮助捕获错误。

2. 避免魔术字符串：不要硬编码字符串，如 'Host' 和 'C04A01'，考虑使用常量或枚举来提高可读性和可维护性。

3. 避免重复代码：处理 sceneList 存在重复模式。您可以将此提取为单独的函数，以避免冗余。

4. 使用 Promise.all() 进行并行请求：如果 getControllerModelList 与其他异步任务无关，可以使用 Promise.all() 并行获取数据。

5. 错误处理：确保对承诺进行适当的错误处理，以捕获在 API 调用过程中可能出现的任何错误。

6. 一致的命名约定：确保变量名遵循一致的命名约定，以提高可读性和可维护性。

7. 使用解构：当访问对象的属性时，考虑使用解构来简化代码。

8. 尽量减少副作用：像 editDeviceType 和 editBoxController 这样的函数似乎有副作用。确保这些副作用得到充分记录和控制。

这是修改优化的代码，把重复的代码都写到了setDataAndInit 这个函数，并且

const isHost = data.deviceType === 'Host'; const deviceType = isHost ? 'C04A01' : 'C04A02';使用了这俩给判断去避免魔术字符串使用

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) {// 处理错误}
};

 只是记录并分享一下，感觉没有什么技术含量，就是把重复代码提取出来了

这篇关于前端代码优化的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---