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如何提炼函数”这篇文章对大家有帮助，同时也希望大家多多支持亿速云，关注亿速云行业资讯频道，更多相关知识等着你来学习!