代码的坏味道——长函数

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

        长函数：长函数的产生：

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

一、避免逻辑是平铺直叙

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

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] || '欢迎访客！';  }  }  
}  

四、需求迭代，是否考虑到了优化？

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

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