前端代码优化

嗯,最近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;
    }
  });
};

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

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

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

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

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

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

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

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

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

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

这是修改优化的代码,把重复的代码都写到了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) {
    // 处理错误
  }
};

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

相关推荐
小妖怪的夏天几秒前
electron 打包web页面解决跨域问题
前端·javascript·electron
骚饼8 分钟前
Git 命令配置别名、Git命令缩写(Mac版)
前端·git
LoveEate19 分钟前
vue3 el-switch表单联动校验
前端·javascript·vue.js
z_y_j22997043824 分钟前
服务器中更新前端项目
服务器·前端
2301_7976042430 分钟前
d40: vue杂项问题
前端·javascript·vue.js
Mintopia1 小时前
领域适配 AIGC:垂直行业 Web 应用的微调技术实践
前端·javascript·aigc
Mintopia1 小时前
Next.js 内置后端能力扩展 —— 重定向与路由保护
前端·javascript·next.js
Olrookie1 小时前
若依前后端分离版学习笔记(十八)——页面权限,页签缓存以及图标,字典,参数的使用
vue.js·笔记·学习
weixin_417257061 小时前
Qt解决不同线程,调用对方的函数
开发语言·qt
IT_陈寒1 小时前
Python 3.12 性能暴增50%!这5个新特性让老项目直接起飞
前端·人工智能·后端