数値を1から25まで一様に5色にマップするためのコードを最適化する

Question

現在、JavaScriptを学習していますが、このコードを作成しました（うまくいきます）が、これを自動化する方法があるはずです。私は、ループ上の少しあいまいだけど、私はそれらを知っているから、私は1つが、このような状況で使用することができることを知っていない：

function calculation() { 

var num = document.getElementById("input").value; 
var trCalc = num % 25; 

var tipColorName = document.getElementById("tipColorName"); 
var ringColorName = document.getElementById("ringColorName"); 

var tipBlock = document.getElementById("tipBlock"); 
var ringBlock = document.getElementById("ringBlock"); 

// Pair Calculations 

if (trCalc > 0 && trCalc <= 5) { 
    tipColorName.innerHTML = "White"; 
    tipBlock.setAttribute("style", "background-color: #f2f2f2; color: #2f2f2f;"); 
} 
if (trCalc > 5 && trCalc <= 10) { 
    tipColorName.innerHTML = "Red"; 
    tipBlock.setAttribute("style", "background-color: #e24341; color: white;"); 
} 
if (trCalc > 10 && trCalc <= 15) { 
    tipColorName.innerHTML = "Black"; 
    tipBlock.setAttribute("style", "background-color: #2f2f2f; color: white;"); 
} 
if (trCalc > 15 && trCalc <= 20) { 
    tipColorName.innerHTML = "Yellow"; 
    tipBlock.setAttribute("style", "background-color: #f4ca37; color: #2f2f2f;"); 
} 
if (trCalc > 20 && trCalc <= 24 || num % 25 == 0 && num > 0) { 
    tipColorName.innerHTML = "Violet"; 
    tipBlock.setAttribute("style", "background-color: #844ae0; color: white;"); 
} 
if ([1, 6, 11, 16, 21].includes(trCalc)) { 
    ringColorName.innerHTML = "Blue"; 
    ringBlock.setAttribute("style", "background-color: #426ffe; color: white;"); 
} 
if ([2, 7, 12, 17, 22].includes(trCalc)) { 
    ringColorName.innerHTML = "Orange"; 
    ringBlock.setAttribute("style", "background-color: #f27f42; color: #2f2f2f;"); 
} 
if ([3, 8, 13, 18, 23].includes(trCalc)) { 
    ringColorName.innerHTML = "Green"; 
    ringBlock.setAttribute("style", "background-color: #25d366; color: white;"); 
} 
if ([4, 9, 14, 19, 24].includes(trCalc)) { 
    ringColorName.innerHTML = "Brown"; 
    ringBlock.setAttribute("style", "background-color: #917260; color: #2f2f2f;"); 
} 
if ([5, 10, 15, 20 ].includes(trCalc) || num % 25 == 0 && num > 0) { 
    ringColorName.innerHTML = "Slate"; 
    ringBlock.setAttribute("style", "background-color: grey; color: #2f2f2f;"); 
} 

すべてのヘルプは歓迎です！

Answer 1

最適化と縮小は、実際には2つの異なるものです。 minification http://closure-compiler.appspot.com/homeのためにこのサイトを見てください。

最適化に関する限り、できることはいくつかあります。

1つの機能を使用してスタイリングを変更することができます。あなたのコードを整理して読みやすくします。ような何か：あなたはモジュロ演算子で見ることができる

if ([1, 6, 11, 16, 21].includes(trCalc)) { 
    changeStyles("White","#f2f2f2","#2f2f2f"); 
} 

：

changeStyles(innerColor,bgColor,color){ 
    ringColorName.innerHTML = innerColor; 
    ringBlock.setAttribute("style", "background-color: "+bgColor+"; color: "+color+";") 
} 

は、その後、あなたの文は次のようになります。最後の5つのifステートメントの場合は、foo = trCalc % 5の後にswitch(foo)のように表示されます。こういう風に見えるかもしれません。もちろん

foo = trCalc % 5 
switch(foo) { 
    case 0: 
     changeStyles("White","#f2f2f2","#2f2f2f"); 
     break; 
    case 1: 
     changeStyles("White","#f2f2f2","#2f2f2f"); 
     break; 
    case 2: 
     changeStyles("White","#f2f2f2","#2f2f2f"); 
     break; 
    case 3: 
     changeStyles("White","#f2f2f2","#2f2f2f"); 
     break; 
    case 4: 
     changeStyles("White","#f2f2f2","#2f2f2f"); 
     break; 
} 

、あなたは機能changeColorsに適切な色を差し込む必要があります。うまくいけばそれはあなたにいくつかのアイデアを与えます。ここで

Answer 2

は、私はそれを最適化する方法を次のとおりです。

const tipColorNames = ['White', 'Red', 'Black', 'Yellow', 'Violet']; 
const tipStyles = [ 
    "background-color: #f2f2f2; color: #2f2f2f;", 
    "background-color: #e24341; color: white;", 
    "background-color: #2f2f2f; color: white;", 
    "background-color: #f4ca37; color: #2f2f2f;", 
    "background-color: #844ae0; color: white;", 
]; 
const ringColorNames = ['Blue', 'Orange', 'Green', 'Brown', 'Slate']; 
const ringStyles = [ 
    "background-color: #426ffe; color: white;", 
    "background-color: #f27f42; color: #2f2f2f;", 
    "background-color: #25d366; color: white;", 
    "background-color: #917260; color: #2f2f2f;", 
    "background-color: grey; color: #2f2f2f;", 
]; 

const divisor = 5; 
const numColors = tipColorNames.length; 

function calculation() { 
    var num = document.getElementById("input").value; 
    var trCalc = num % (divisor * numColors); 

    var tipColorName = document.getElementById("tipColorName"); 
    var ringColorName = document.getElementById("ringColorName"); 

    var tipBlock = document.getElementById("tipBlock"); 
    var ringBlock = document.getElementById("ringBlock"); 

    const tipColorIndex = trCalc === 0 && num > 0 
    ? numColors - 1 
    : (trCalc - 1)/divisor; 

    tipColorName.innerHTML = tipColorNames[tipColorIndex]; 
    tipBlock.setAttribute('style', tipStyles[tipColorIndex]); 

    const ringColorIndex = (num - 1) % numColors; 
    ringColorName.innerHTML = ringColorNames[ringColorIndex]; 
    ringBlock.setAttribute('style', ringStyles[ringColorIndex]); 
}