JavaScript如何提煉函數

這篇文章主要介紹了JavaScript如何提煉函數，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

提煉函數

好處：

• 避免出現超大函數。

• 獨立出來的函數有助于代碼復用。

• 獨立出來的函數更容易被覆寫。

• 獨立出來的函數如果擁有一個良好的命名，它本身就起到了注釋的作用。

• 語義化將多段分離的邏輯放在不同的函數中實現，可以使代碼邏輯清晰，清楚的看到每一步在做什么。

代碼舉例：

實現獲取數據，然后操作dom顯示數據，最后添加事件

函數提煉前

// 邏輯都寫在一起，需要將所有邏輯看完才知道這段代碼是干嘛的，局部邏輯無法復用
function main() {
 $.ajax.get('/getData').then((res) => {
  const ul = document.getElementById('ul');
  ul.innerHTML = res.list.map(text => `<li class="li">${text}</li>`).join('\n');
  const list = document.getElementsByClassName('li');
  for (let i = 0; i < list.length; i ++) {
   list[i].addEventListener('focus', () => {
    // do something
   });
  }
 });
}

函數提煉后

function getData() {
 return $.ajax.get('/getData').then((res) => res.data.list);
}
function showList(list) {
 const ul = document.getElementById('ul');
 ul.innerHTML = list.map(text => `<li class="li">${text}</li>`).join('\n');
}
function addEvent() {
 const list = document.getElementsByClassName('li');
 for (let i = 0; i < list.length; i ++) {
  list[i].addEventListener('focus', () => {
   // do something
  });
 }
}
// 邏輯清晰，一眼讀懂每一步在做什么，某些提煉出來的函數還可以被復用
async function main() {
 const list = await getData(); // 獲取數據
 showList(list); // 顯示頁面
 addEvent(); // 添加事件
}

感謝你能夠認真閱讀完這篇文章，希望小編分享的“JavaScript如何提煉函數”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!