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>

Answer 2

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

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

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

function getTravelQuote() {
    return getQuoteFor('travel')
}

function getLifeQuote() {
    return getQuoteFor('life')
}

function getQuoteFor(genre) {
    const quoteOptions = genre === 'travel' ? travelQuoteOptions : lifeQuoteOptions
    let inputValue = document.getElementById("userInput").value;
    let quote = '';
    for (i = 0; i < inputValue; i++) {
        quote += `${quoteOptions[0][Math.floor(Math.random() * quoteOptions[0].length)]} ${quoteOptions[1][Math.floor(Math.random() * quoteOptions[1].length)]}${quoteOptions[2][Math.floor(Math.random() * quoteOptions[2].length)]} <br> <br>`
        quoteArea.innerHTML = quote;
    }
    return quote;
}

如何重构这两个功能？

2 个答案: