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

可是，你是否意识到，除了转达给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}`; 
  } 
} 

又多又伟大又让人难以领略的函数

小贴士：因为本例不必要变乱侦听器的处理赏罚措施，以是删除了它们。

（编辑：湖南网）

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