代码的坏味道——长函数

        前言:一个函数应该尽量做一件事情,如果非要做多个事情,要做函数提取,每次迭代应该考虑到是否有重复代码或者可以优化的代码。

        长函数:长函数的产生:

  • 逻辑是平铺直叙的
  • 需求迭代没有考虑优化,一次加一点

一、避免逻辑是平铺直叙

不要把多个逻辑的事情写到一个函数中,每个函数只做一件事情。

badCase:

methods: {fetchDataAndRender() {// 数据请求axios.get('https://api.example.com/data').then(response => {// 数据处理this.data = response.data;// DOM操作document.getElementById('result').innerText = this.data;// 事件处理document.getElementById('button').addEventListener('click', () => {alert('Data loaded successfully!');});}).catch(error => {console.error('Error fetching data: ', error);});}
}

goodCase:

// Good Case
methods: {fetchData() {axios.get('https://api.example.com/data').then(response => {this.data = response.data;}).catch(error => {console.error('Error fetching data: ', error);});},renderData() {document.getElementById('result').innerText = this.data;},handleButtonClick() {document.getElementById('button').addEventListener('click', () => {alert('Data loaded successfully!');});}
}

二、函数最大行数

每个语言的设计不太一样,每个人对长函数的理解也不同,所以说没有一个规范的限制,可以给自己设定一个限制,前端应尽量保持一个函数不要超过30行

badCase:

 methods: {  registerUser() {  const { username, email, password } = this.form;  if (!username || !email || !password) {  alert('所有字段都是必填项!');  return;  }  if (!/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(email)) {  alert('无效的电子邮件地址!');  return;  }  if (password.length < 6) {  alert('密码长度至少为6个字符!');  return;  }  // 假设有一个axios实例  this.axios.post('/api/register', {  username,  email,  password  })  .then(response => {  if (response.data.success) {  alert('注册成功!');  this.$router.push('/login');  } else {  alert('注册失败:' + response.data.message);  }  })  .catch(error => {  console.error('注册出错:', error);  alert('注册时发生错误,请稍后再试!');  });  }  }  

goodCase:

  methods: {  registerUser() {  if (!this.validateForm()) {  return;  }  this.sendRegistrationRequest();  },  validateForm() {  const { username, email, password } = this.form;  if (!username || !email || !password) {  alert('所有字段都是必填项!');  return false;  }  if (!/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(email)) {  alert('无效的电子邮件地址!');  return false;  }  if (password.length < 6) {  alert('密码长度至少为6个字符!');  return false;  }  return true;  },  sendRegistrationRequest() {  this.axios.post('/api/register', this.form)  .then(response => {  if (response.data.success) {  alert('注册成功!');  this.$router.push('/login');  } else {  alert('注册失败:' + response.data.message);  }  })  .catch(error => {  console.error('注册出错:', error);  alert('注册时发生错误,请稍后再试!');  });  }  }  

三、避免重复的语句出现(if|else居多)

遇到简单的if的语句时应当换成三元表达式,遇到if|else逻辑相似时应该抽离

badCase:

 data() {  return {  userRole: 'admin'  };  },  computed: {  welcomeMessage() {  return this.getWelcomeMessage();  }  },  methods: {  getWelcomeMessage() {  let message = '';  if (this.userRole === 'admin') {  message = '欢迎管理员!';  } else if (this.userRole === 'editor') {  message = '欢迎编辑者!';  } else if (this.userRole === 'viewer') {  message = '欢迎查看者!';  } else {  message = '欢迎访客!';  // 假设这里还有其他逻辑,导致函数过长  // ...(省略其他逻辑)  }  // 假设这里还有更多的条件判断和逻辑处理  // ...(省略)  return message;  }  }  

goodCase:

 data() {  return {  userRole: 'admin',  roleMessages: {  admin: '欢迎管理员!',  editor: '欢迎编辑者!',  viewer: '欢迎查看者!',  }  };  },  computed: {  welcomeMessage() {  // 使用对象查找,如果不存在则返回默认消息  return this.roleMessages[this.userRole] || '欢迎访客!';  }  }  
}  

四、需求迭代,是否考虑到了优化?

当遇到新的需求迭代,避免不了影响之前的函数内的逻辑处理。

  • 前瞻性设计:开发一开始是否考虑到如果需求有了迭代?是否提前留好了后续的余地?
  • 童子军军规:需求迭代后,是否比迭代前的代码更加干净整洁?
  • 粒度越小越好:是否真的做到了每个函数是独立的只做了一件事情?

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

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

相关文章

解决微信读书和Apple Books导入epub电子书不显示图片的问题

title: 解决微信读书和Apple Books导入epub电子书不显示图片的问题 tags: 个人成长 categories:杂谈 最近找到一本很喜欢的书的电子版的epub版&#xff0c;发现无论是导入微信读书&#xff0c;还是Apple家的Books, 都无法正常显示图片。 于是我用calibre打开epub电子书&#x…

安卓虚拟位置修改

随着安卓系统的不断更新&#xff0c;确保软件和应用与最新系统版本的兼容性变得日益重要。本文档旨在指导用户如何在安卓14/15系统上使用特定的功能。 2. 系统兼容性更新 2.1 支持安卓14/15&#xff1a;更新了对安卓14/15版本的支持&#xff0c;确保了软件的兼容性。 2.2 路…

linux中可执行文件为什么不能拷贝覆盖

对于一个普通的文件&#xff0c;假如有两个文件&#xff0c;分别是file和file1&#xff0c;我们使用 cp file1 file的方式使用file1的内容来覆盖file的内容&#xff0c;这样是可以的。 但是对于可执行文件来说&#xff0c;当这个文件在执行的时候&#xff0c;是不能通过cp的方…

将 KNX 接入 Home Assistant 之四 功能测试

一&#xff1a;测试标准的KNX网关功能 测试软件识别是否正常 可以看到再ETS6和ETS5上都能正常识别 测试数据收发 可以正常发送数据 测试配置设备参数&#xff08;下载配置&#xff09; 可以看出&#xff0c;在ETS5上是可以正常下载参数的 但是 ETS6下载是失败的&#xff…

k8s-第十一节-Job和CronJob

Job Kubernetes jobs主要是针对短时和批量的工作负载。它是为了结束而运行的&#xff0c;而不是像deployment、replicasets、replication controllers和DaemonSets等其他对象那样持续运行。 Kubernetes Jobs会一直运行到Job中指定的任务完成。也就是说&#xff0c;如果pods给…

Pandas 学习笔记(四)--CSV文件

CSV文件 CSV&#xff08;Comma-Separated Values&#xff0c;逗号分隔值&#xff0c;有时也称为字符分隔值&#xff0c;因为分隔字符也可以不是逗号&#xff09;&#xff0c;其文件以纯文本形式存储表格数据&#xff08;数字和文本&#xff09;。 读取与写入 读取csv文件 i…

可视化作品集(08):能源电力领域

能源电力领域的可视化大屏&#xff0c;有着巨大的用武之地&#xff0c;不要小看它。 监控能源生产和消耗情况&#xff1a; 通过可视化大屏&#xff0c;可以实时监控能源生产和消耗情况&#xff0c;包括发电量、能源供应情况、能源消耗情况等&#xff0c;帮助管理者及时了解能…

C语言 | Leetcode C语言题解之第218题天际线问题

题目&#xff1a; 题解&#xff1a; struct pair {int first, second; };struct Heap {struct pair* heap;int heapSize;bool (*cmp)(struct pair*, struct pair*); };void init(struct Heap* obj, int n, bool (*cmp)(struct pair*, struct pair*)) {obj->heap malloc(si…

调制信号识别系列 (一):基准模型

调制信号识别系列 (一)&#xff1a;基准模型 说明&#xff1a;本文包含对CNN和CNNLSTM基准模型的复现&#xff0c;模型架构参考下述两篇文章 文章目录 调制信号识别系列 (一)&#xff1a;基准模型一、论文1、DL-PR: Generalized automatic modulation classification method b…

软件架构之操作系统

第 2 章操作系统 本章主要介绍操作系统的基本概念及其形成、发展历史和主要类型&#xff0c;并指出操作系统的5 大管理功能。掌握操作系统原理的关键在于深入理解“一个观点、两条线索”。一个观点是以资源管理的观点来定义操作系统&#xff1b;两条线索是指操作系统如何管理计…

【计算机毕业设计】020基于weixin小程序订餐系统

&#x1f64a;作者简介&#xff1a;拥有多年开发工作经验&#xff0c;分享技术代码帮助学生学习&#xff0c;独立完成自己的项目或者毕业设计。 代码可以私聊博主获取。&#x1f339;赠送计算机毕业设计600个选题excel文件&#xff0c;帮助大学选题。赠送开题报告模板&#xff…

C语言获取当前时间

一共有两段代码&#xff0c;一个是获取当前时间&#xff0c;一个是获取到现在的总毫秒数 求关注&#x1f604; 互粉必回 获取当前时间 #include <stdio.h> #include <time.h> int main() { time_t rawtime; struct tm * timeinfo; char buffer[20]; // 获取当前…

Linux内核编译与调试menuos-linux-3.18.6-在ubuntu20.04环境

1 具体操作 下载 linux-3.18.6内核 wget https://www.kernel.org/pub/linux/kernel/v3.x/linux-3.18.6.tar.xz解压进入linux-3.18.6文件夹 tar -xvf linux-3.18.6.tar.xz cd linux-3.18.6/编译 #make x86_64_defconfig # 为x86_64生成配置 #make alldefconfig make i3…

每天一个数据分析题(四百零十)- 主成分

实际应用中&#xff0c;关于主成分数量K的取值&#xff0c;下列说法错误的是&#xff08; &#xff09; A. 可以基于碎石图进行判断 B. 特征根从大到小排序&#xff0c;通常要求前 K 个特征根都大于 1 C. 通常要求 K 个主成分的累积方差比超过 80% D. 各个主成分之间的方向…

什么是区块链的“智能合约”

区块链的“智能合约”是一种存储在区块链上的计算机协议&#xff0c;它能够自动执行合约条款&#xff0c;并在满足预设条件时自动执行相关操作。智能合约通过编程语言&#xff08;如Solidity&#xff09;编写&#xff0c;可以在去中心化的环境中运行&#xff0c;无需人工干预。…

spdlog一个非常好用的C++日志库(七): 源码分析之异常类spdlog_ex

目录 1.自定义异常类spdlog_ex 1.1.通用异常 1.2.系统调用异常 1.3.what()函数 2.异常的使用 2.1.抛出异常 2.2.控制异常使用 1.自定义异常类spdlog_ex 标准库异常类&#xff08;std::exception&#xff09;系列&#xff0c;能满足大多数使用异常的场景&#xff0c;但对…

100359.统计X和Y频数相等的子矩阵数量

1.题目描述 给你一个二维字符矩阵 grid&#xff0c;其中 grid[i][j] 可能是 X、Y 或 .&#xff0c;返回满足以下条件的子矩阵数量&#xff1a; 包含 grid[0][0]X 和 Y 的频数相等。至少包含一个 X。 示例 1&#xff1a; 输入&#xff1a; grid [["X","Y",…

Avalonia中的样式

文章目录 前言样式定义代码切换样式样式主题前言 Avalonia的样式是Styles,与WPF类似。用于在控件之间共享属性设置用于在控件之间共享属性设置,样式由 Selector和属性组成。 样式定义 下面定义一个最简单的样式 <Window.Styles><Style Selector="TextBlock…

双 Token 无感刷新机制实现

✅作者简介&#xff1a;热爱Java后端开发的一名学习者&#xff0c;大家可以跟我一起讨论各种问题喔。 &#x1f34e;个人主页&#xff1a;Hhzzy99 &#x1f34a;个人信条&#xff1a;坚持就是胜利&#xff01; &#x1f49e;当前专栏&#xff1a;项目实践 &#x1f96d;本文内容…

微信小程序性能与体验优化

1. 合理的设置可点击元素的响应区域大小&#xff1b; 比较常见的是页面的点击按钮太小&#xff0c;用户点击不到按钮&#xff0c;这样用户体验很不好。 2. 避免渲染页面耗时过长&#xff1b; 当页面渲染时间过长的话&#xff0c;会让用户感觉非常卡顿&#xff0c;当出现这种…