前端代码优化

嗯,最近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. 尽量减少副作用:像 editDeviceTypeeditBoxController 这样的函数似乎有副作用。确保这些副作用得到充分记录和控制。

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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/9027.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

代码随想录算法训练营DAY46|C++动态规划Part8|139.单词拆分、多重背包理论基础、背包问题总结篇

文章目录 139.单词拆分思路CPP代码 多重背包理论基础处理输入把所有个数大于1的物品展开成1个开始迭代,计算dp数组代码优化 背包问题总结篇 139.单词拆分 力扣题目链接 文章讲解:139.单词拆分 视频讲解:你的背包如何装满?| LeetCo…

计算方法实验9:Romberg积分求解速度、位移

任务 输出质点的轨迹 ( x ( t ) , y ( t ) ) , t ∈ { 0.1 , 0.2 , 0.3 , . . . , 10 } (x(t), y(t)), t\in \{0.1, 0.2, 0.3, ..., 10\} (x(t),y(t)),t∈{0.1,0.2,0.3,...,10},并在二维平面中画出该轨迹.请比较M分别取4, 8, 12, 16, 20 时,Romberg积分达…

go将时间对象切换到不同时区

编程的时候我们可能会遇到一些时区问题。在Go语言中,处理时区通常涉及到time包和time/tzdata包(如果需要更新时区数据)。这篇文章就写一下如何切换时区 一:直接上代码 package main import ( "fmt" "time&qu…

k8s持久化存储之OpenEBS

一、介绍 OpenEBS 是 CNCF 项目的一部分,采用 Apache v2 许可证。是 Kubernetes 部署使用最广泛且易用的开源存储解决方案。 目的: 让持久化工作负载的存储和存储服务完全集成到环境中,这样每个团队和工作负载都可以从控制的粒度和 Kubern…

蓝桥杯省三爆改省二,省一到底做错了什么?

到底怎么个事 这届蓝桥杯选的软件测试赛道,都说选择大于努力,软件测试一不卷二不难。省赛结束,自己就感觉稳啦,全部都稳啦。没想到一出结果,省三,g了。说落差,是真的有一点,就感觉和自己预期的…

mysql数据库和Oracle数据库除法或乘法,结果保留两位小数

在MySQL和Oracle数据库中,当你执行除法或乘法运算并希望结果保留两位小数时,你可以使用各自的内置函数来达到这个目的。 MySQL 在MySQL中,你可以使用ROUND()函数来四舍五入到指定的小数位数。例如,要保留两位小数,你…

汽车软件研发工具链丨怿星科技新产品重磅发布

“创新引领未来”聚焦汽车软件新基建,4月27日下午,怿星科技2024新产品发布会在北京圆满举行!智能汽车领域的企业代表、知名大企业负责人、投资机构代表、研究机构代表齐聚现场,线上直播同步开启,共同见证怿星科技从单点…

经典回溯算法之N皇后问题

问题描述: 有一个N*N的棋盘,需要将N个皇后放在棋盘上,保证棋盘的每一行每一列每一左斜列每一右斜列都最多只能有一个皇后。 按照国际象棋的规则,皇后可以攻击与之处在同一行或同一列或同一斜线上的棋子。 n 皇后问题 研究的是如…

Java | Leetcode Java题解之第71题简化路径

题目&#xff1a; 题解&#xff1a; class Solution {public String simplifyPath(String path) {String[] names path.split("/");Deque<String> stack new ArrayDeque<String>();for (String name : names) {if ("..".equals(name)) {if …

【基于 PyTorch 的 Python 深度学习】5 机器学习基础(3)

前言 文章性质&#xff1a;学习笔记 &#x1f4d6; 学习资料&#xff1a;吴茂贵《 Python 深度学习基于 PyTorch ( 第 2 版 ) 》【ISBN】978-7-111-71880-2 主要内容&#xff1a;根据学习资料撰写的学习笔记&#xff0c;该篇主要介绍了单 GPU 加速和多 GPU 加速&#xff0c;以及…

代码随想录leetcode200题之哈希表

目录 1 介绍2 训练3 参考 1 介绍 本博客用来记录代码随想录leetcode200题中哈希表部分的题目。 2 训练 题目1&#xff1a;242. 有效的字母异位词 C代码如下&#xff0c; class Solution { public:bool isAnagram(string s, string t) {vector<int> cnt1(26, 0), cnt…

洛谷 P3379 [模板] 最近公共祖先(LCA)

【模板】最近公共祖先&#xff08;LCA&#xff09; 题目描述 如题&#xff0c;给定一棵有根多叉树&#xff0c;请求出指定两个点直接最近的公共祖先。 输入格式 第一行包含三个正整数 N , M , S N,M,S N,M,S&#xff0c;分别表示树的结点个数、询问的个数和树根结点的序号…

第十一节 LLAVA模型lora训练(包含lora权重预加载与源码解读)

文章目录 前言一、语言模型加载1、语言模型加载2、语言模型训练处理a、embeding处理b、语言模型lora训练处理lora参数配置peft配置语言模型lora参数c、语言模型tokenizer加载加载tokenizer设置对话开头语句二、视觉模型加载1、加载图像模型主函数源码解读2、initialize_vision_…

达梦数据库使用-外部表

文章目录 前言一、外部表使用1.外部表定义1.1 数据文件定义方式1.2控制文件定义方式2.外部表定义注意事项二、使用示例1.disql工具的脚本方式1.1 使用数据文件1.2 使用控制文件2.DM管理工具的图形方式2.1 创建目录2.2.创建指向数据文件的外部表2.3.创建指向控制文件的外部表三、…

英语口语情景对话视频软件分享!

在当今全球化的时代&#xff0c;英语已成为一种通用的国际语言。为了提高英语口语能力&#xff0c;越来越多的人选择使用英语口语情景对话视频软件。本文将为您推荐几款备受欢迎的英语口语情景对话视频软件&#xff0c;帮助您轻松提高英语口语水平。 AI外语陪练 AI外语陪练软件…

Leetcode 3130. Find All Possible Stable Binary Arrays II

Leetcode 3130. Find All Possible Stable Binary Arrays II 0. 序言1. 算法思路2. 代码实现 1. 第一版本2. 第二版本3. 第三版本4. 第四版本 3. 算法优化 1. 算法实现一2. 算法实现二 题目链接&#xff1a;3130. Find All Possible Stable Binary Arrays II 0. 序言 这道题…

已经有 Prometheus 了,还需要夜莺?

谈起当下监控&#xff0c;Prometheus 无疑是最火的项目&#xff0c;如果只是监控机器、网络设备&#xff0c;Zabbix 尚可一战&#xff0c;如果既要监控设备又要监控应用程序、Kubernetes 等基础设施&#xff0c;Prometheus 就是最佳选择。甚至有些开源项目&#xff0c;已经内置…

LoRA的原理简介

在文章开始前先澄清一个概念&#xff0c;需要区分形近的单词"LoRa"&#xff08;long range&#xff09;&#xff0c;这是一项通信技术。熟悉物联网行业的朋友相对会比较熟悉LoRa这项技术&#xff0c;因为有些设备比如电梯的控制就使用了这个技术进行本地数据和命令的…

小红书释放被封手机号 无限注册

前几年抖音也可以释放被封手机号 那时候都不重视 导致现在被封手机号想释放 基本不可能的 或者就是最少几百块 有专业的人帮你通过某些信息差释放 本教程是拆解 小红书被封手机号怎么释放&#xff0c;从今年开始&#xff0c;被封的手机号无法注销了 所以很困扰 那么本教程来…

TypeScript中的数据选择艺术:pick和omit操作入门

引言 标题&#xff1a;TypeScript中的数据选择艺术&#xff1a;pick和omit操作入门简短介绍&#xff1a;探索TypeScript中的实用工具类型Pick和Omit&#xff0c;它们可以帮助你从现有类型中选择或排除属性&#xff0c;简化你的代码并提高类型安全性。 背景知识 易于理解的解…