? ? ? ? 前言：一個函數應該盡量做一件事情，如果非要做多個事情，要做函數提取，每次迭代應該考慮到是否有重復代碼或者可以優化的代碼。

????????長函數：長函數的產生：

• 邏輯是平鋪直敘的
• 需求迭代沒有考慮優化，一次加一點

一、避免邏輯是平鋪直敘

不要把多個邏輯的事情寫到一個函數中，每個函數只做一件事情。

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] || '歡迎訪客！';  }  }  
}  

四、需求迭代，是否考慮到了優化？

當遇到新的需求迭代，避免不了影響之前的函數內的邏輯處理。

• 前瞻性設計：開發一開始是否考慮到如果需求有了迭代？是否提前留好了后續的余地？
• 童子軍軍規：需求迭代后，是否比迭代前的代碼更加干凈整潔？
• 粒度越小越好：是否真的做到了每個函數是獨立的只做了一件事情？