javascript - 如何重构这两个函数？

Question

为我的随机报价生成器重构这个 JS 的最佳方法是什么？ getLifeQuote和 getTravelQuote函数执行相同的任务。我已经尝试了几件事，但它不起作用。这是代码:

    lifeBtn.addEventListener('click', getLifeQuote); 
    travelBtn.addEventListener('click', getTravelQuote);

function getLifeQuote(){

  let sentenceFrag1 = ['Being happy', 'Living contently', 'Enjoying your life', 'Taking it easy', 'Trying to relax']
  let sentenceFrag2 = ['is a challenge', 'is worth it', 'is a possibility', 'is the goal', 'can be done'];
  let sentenceFrag3 = ['for a brighter future.', 'to soar higher.', 'for a better you.', 'to achieve greatness.', 'for a stress-free day.'];

  let inputValue = document.getElementById("userInput").value;
  let quote = ''; 
  for (i = 0; i < inputValue; i++) {
    quote += `${sentenceFrag1[Math.floor(Math.random() * sentenceFrag1.length)]} ${sentenceFrag2[Math.floor(Math.random() * sentenceFrag2.length)] }${sentenceFrag3[Math.floor(Math.random() * sentenceFrag3.length)]} <br> <br>`

    quoteArea.innerHTML= quote; 
  }
   return quote;
}


function getTravelQuote(){

    let sentenceFrag1 = ['Traveling', 'Explorinig', 'Seeing the world', 'Going on a journey', 'Hitchhiking']
    let sentenceFrag2 = ['is the ticket to', 'opens your eyes to', 'grants access to', 'opens doors to', 'can make you experience'];
    let sentenceFrag3 = ['the earth around us.', 'the lives of others.', 'the many cultures different from your own.', 'the adventures that await.', 'the joys of the world.'];

    let inputValue = document.getElementById("userInput").value;
    let quote = ''; 
    for (i = 0; i < inputValue; i++) {
    quote += `${sentenceFrag1[Math.floor(Math.random() * sentenceFrag1.length)]} ${sentenceFrag2[Math.floor(Math.random() * sentenceFrag2.length)] }${sentenceFrag3[Math.floor(Math.random() * sentenceFrag3.length)]} <br> <br>`

    quoteArea.innerHTML= quote; 
    }
     return quote;
  }

Answer 1

您可以对功能进行分组并为不同的语句集使用参数:

lifeBtn.addEventListener('click', () => { getQuotes("life") })
travelBtn.addEventListener('click', () => { getQuotes("travel") })

function getQuotes(type) {
  let sentenceFrag1, sentenceFrag2, sentenceFrag3, quote = ''
  
  if (type === "life") {
    sentenceFrag1 = ['Being happy', 'Living contently', 'Enjoying your life', 'Taking it easy', 'Trying to relax']
    sentenceFrag2 = ['is a challenge', 'is worth it', 'is a possibility', 'is the goal', 'can be done'];
    sentenceFrag3 = ['for a brighter future.', 'to soar higher.', 'for a better you.', 'to achieve greatness.', 'for a stress-free day.'];
  } else {
    sentenceFrag1 = ['Traveling', 'Explorinig', 'Seeing the world', 'Going on a journey', 'Hitchhiking']
    sentenceFrag2 = ['is the ticket to', 'opens your eyes to', 'grants access to', 'opens doors to', 'can make you experience'];
    sentenceFrag3 = ['the earth around us.', 'the lives of others.', 'the many cultures different from your own.', 'the adventures that await.', 'the joys of the world.'];
  }

  for (i = 0; i < userInput.value; i++) {
    quote += `${sentenceFrag1[Math.floor(Math.random() * sentenceFrag1.length)]} ${sentenceFrag2[Math.floor(Math.random() * sentenceFrag2.length)] } ${sentenceFrag3[Math.floor(Math.random() * sentenceFrag3.length)]} <br> <br>`
    quoteArea.innerHTML = quote
  }
  
  return quote
}

<button id="lifeBtn">lifeBtn</button>
<button id="travelBtn">travelBtn</button>
<input id="userInput" type="number" value="1" />
<br/>
<div id="quoteArea"></div>