重构的艺术：五个小妙招助你写出好代码！

但是，你是否意识到，除了传递给getNewsContent的类型字符串之外，这两个函数完全相同?这是重构代码时经常发生的事情。通常情况下，更改一个会导致另一个更改，以此类推，直到重构后的代码最终变成原始代码的一半大小。代码告诉你它需要什么：

function getNews(type) { 
  const allNews = getNewsFromWeb(); 
  return getNewsContent(allNews, type); 
} 
 
function getNewsContent(newsList, type) { 
  const news = []; 
  for (let i = newsList.length - 1; i >= 0; i--) { 
    if (newsList[i].type === type) { 
      news.push(newsList[i].content); 
    } 
  } 
  return news; 
} 

getJavaScriptNews, getRustNews和getGolangNews函数去了哪里?将它们替换为getNews函数，该函数将新闻类型作为参数接收。这样，无论添加多少类型的新闻，总是使用相同的功能。这称为抽象，允许我们重用函数，因此非常有用。抽象是我在写代码的时候最常用的技术之一。

(2) 补充：使用es6特性使for循环更具可读性

for循环并不完全可读。通过引入es6数组函数，可以有95%的机会避免使用它们。在本例中可以使用array.filter和array.map组合来替换原始循环：

function getNews(type) { 
  const allNews = getNewsFromWeb(); 
  return getNewsContent(allNews, type); 
} 
 
function getNewsContent(newsList, type) { 
  return newsList 
    .filter(newsItem => newsItem.type === type) 
    .map(newsItem => newsItem.content); 
} 

用 Array.filter 和 Array.map 来代替循环

• 用Array.filter只返回其类型等于作为参数传递的类型的元素。
• 用Array.map只返回item对象的content属性，而不是整个item。

恭喜你，经过三次简单的重构，最初的三个函数已经缩减为两个，这更容易理解和维护。另外，抽象让getNews函数变得可以重新利用。

5. 一个函数只用来做一件事

一个函数应该只做一件事。做不止一件事的函数是所有罪恶的根源，也是代码中可能遇到的最糟糕的事情之一(嵌套的if语句也是)。它们很混乱，搞得代码难以理解。下面是一个来自实际应用程序的复杂函数示例：

function startProgram() { 
  if (!window.indexedDB) { 
    window.alert("Browser not support indexeDB"); 
  } else { 
    let openRequest = indexedDB.open("store", 1); 
  
    openRequest.onupgradeneeded = () => {}; 
  
    openRequest.onerror = () => { 
      console.error("Error", openRequest.error); 
    }; 
  
    openRequest.onsuccess = () => { 
      let db = openRequest.result; 
    }; 
  
    document.getElementById('stat-op').addEventListener('click', () => {}); 
    document.getElementById('pre2456').addEventListener('click', () => {}); 
    document.getElementById('cpTagList100').addEventListener('change', () => {}); 
    document.getElementById('cpTagList101').addEventListener('click', () => {}); 
    document.getElementById('gototop').addEventListener('click', () => {}); 
    document.getElementById('asp10').addEventListener('click', () => {}); 
  
    fetch("employeList.json") 
      .then(res => res.json()) 
      .then(employes => { 
        document.getElementById("employesSelect").innerHTML = employes.reduce( 
          (content, employe) => employe.name + "<br>", 
          "" 
        ); 
      }); 
  
    document.getElementById("usernameLoged").innerHTML = `Welcome, ${username}`; 
  } 
} 

又多又复杂又让人难以理解的函数

小贴士：由于本例不需要事件侦听器的处理程序，所以删除了它们。

（编辑：晋中站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!