如何将函数添加到 JavaScript switch 语句中？

Question

我正在设计一个温度转换器，并试图根据所选的单位使转换函数发生变化。 华氏度是默认计算方式，当单位切换时，我似乎无法将其更改为其他转换。 如何将转换函数添加到 switch 语句中？

 // Select unit const units = document.querySelector('#units'); units.addEventListener('change', function(e) { let selectedUnit = units.selectedIndex; let degree = document.querySelector('#degree'); switch(selectedUnit) { case 0: degree.innerHTML = "°F"; document.getElementById('tag1').innerHTML = "°C"; document.getElementById('tag2').innerHTML = "°R"; document.getElementById('tag3').innerHTML = "°K"; document.getElementById('fahrenheit').placeholder = "Degrees fahrenheit"; break; case 1: degree.innerHTML = "°C"; document.getElementById('tag1').innerHTML = "K"; document.getElementById('tag2').innerHTML = "°R"; document.getElementById('tag3').innerHTML = "°F"; document.getElementById('fahrenheit').placeholder = "Degrees Celsius"; break; case 2: degree.innerHTML = "°R"; document.getElementById('tag1').innerHTML = "°C"; document.getElementById('tag2').innerHTML = "K"; document.getElementById('tag3').innerHTML = "°F"; document.getElementById('fahrenheit').placeholder = "Degrees Rankine"; break; case 3: degree.innerHTML = "K"; document.getElementById('tag1').innerHTML = "°C"; document.getElementById('tag2').innerHTML = "°R"; document.getElementById('tag3').innerHTML = "°F"; document.getElementById('fahrenheit').placeholder = "Kelvin"; break; default: degree.innerHTML = "°F"; document.getElementById('fahrenheit').placeholder = "Degrees Fahrenheit"; break; } }); // Listen for submit document.querySelector('#temp-form').addEventListener('submit', function(e) { // Hide results document.querySelector('#results').style.display = 'none'; // Show loader document.querySelector('#loading').style.display = 'block'; setTimeout(calculateResults, 2000); e.preventDefault(); }); // Calculate Results function calculateResults(e){ console.log('Calculating...'); // UI Vars const fahrenheitInput = document.querySelector('#fahrenheit'); const celsiusInput = document.querySelector('#celsius'); const rankineInput = document.querySelector('#rankine'); const kelvinInput = document.querySelector('#kelvin'); function fahrenheitConversion() { const ftemp = parseFloat(fahrenheitInput.value); const ctemp = (ftemp - 32) * (5/9); const rtemp = ftemp + 459.67; const ktemp = (ftemp - 32) * (5/9) + 273.15; celsiusInput.value = ctemp.toFixed(2); rankineInput.value = rtemp.toFixed(2); kelvinInput.value = ktemp.toFixed(2); } function celsiusConversion() { const ctemp = parseFloat(celsiusInput.value); const ftemp = (ctemp * (9/5)) + 32; const rtemp = (ctemp * (9/5)) + 491.67; const ktemp = ctemp + 273.15; fahrenheitInput.value = ftemp.toFixed(2); rankineInput.value = rtemp.toFixed(2); kelvinInput.value = ktemp.toFixed(2); } function rankineConversion() { const rtemp = parseFloat(rankineInput.value); const ctemp = (rtemp - 491.67) * (5/9); const ftemp = rtemp - 459.67; const ktemp = rtemp * (5/9); celsiusInput.value = ctemp.toFixed(2); fahrenheitInput.value = ftemp.toFixed(2); kelvinInput.value = ktemp.toFixed(2); } function kelvinConversion() { const ktemp = parseFloat(kelvinInput.value); const ctemp = ktemp - 273.15; const rtemp = ktemp * (9/5); const ftemp = (ktemp - 273.15) * (9/5) + 32; celsiusInput.value = ctemp.toFixed(2); rankineInput.value = rtemp.toFixed(2); fahrenheitInput.value = ftemp.toFixed(2); } // Show results document.querySelector('#results').style.display = 'block'; // Hide loader document.querySelector('#loading').style.display = 'none'; fahrenheitInput.addEventListener('submit', fahrenheitConversion()); celsiusInput.addEventListener('submit', celsiusConversion()); rankineInput.addEventListener('submit', rankineConversion()); kelvinInput.addEventListener('submit', kelvinConversion()); }

Answer 1

我认为您的变量是一个字符串，但您的 case switch 语句适用于数字。 如果您对代码以及为什么要做正在做的事情感到困惑，那么您可以做一些事情。

• 在代码周围放置大量 console.log 以向您展示正在发生的事情。 打印变量的类型https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/typeof这样你就会知道你得到了什么。 将调试/记录器的东西留在生产代码中并不是很好，但是当遇到困难时，您可以将记录器置于全局变量保护之下

if (debug_unit_conversion) console.log(......

通过这种方式，您可以通过更改一些变量来对代码的不同部分/模块进行故障排除。

• 您也可以将 console.log 上的变量格式化为您正在使用的格式https://dmitripavlutin.com/console-log-tips/这样当您的字符串用作数字时会发生什么

• 您可以使用断点调试代码并观察代码执行时发生的情况，这是非常被低估的，console.loggers 不是调试代码的正确方法，但这是 Chrome： https : //developers.google.com /web/tools/chrome-devtools/javascript/breakpoints火狐： https : //developer.mozilla.org/en-US/docs/Tools/Debugger/How_to/Set_a_breakpoint Opera： https : //raygun.com/blog/debug -javascript-歌剧/

代码本身可以通过许多其他方式完成，总体而言，您不希望 case switch 语句变得庞大，命令设计模式很好地解决了这个问题： https : //www.dofactory.com/javascript/design-模式/命令，或者您可以在两者之间执行某些操作，只需对特定选项进行回调即可调用代码。

这可能是挑剔的，因为它可能已经被视为视图的一部分，并且视图可以有一些逻辑。 但在我看来，业务逻辑（控制器）与您的演示文稿（视图）部分重叠，您可以将功能分成两个，第一个只是决定以什么顺序显示什么东西，第二个是显示它们. 所以第一个将返回一个由innerHTML 内容组成的数组，第二个将把这个数组应用到HTML 本身。 然后对于每个“单元”，可以重用第二个函数，并且在某种程度上，您应该能够修改呈现事物的方式（或者如果您找到更新 HTML 的更好方法），而无需更改将得到的逻辑部分以什么顺序显示。

例如

document.getElementById('fahrenheit').placeholder = "摄氏度";

可能看起来很混乱，想象一下几年后回到这段代码，最好的代码是自我记录的代码，而这个代码可能会让你感到困惑。 'unit'、'unitDescription' 或 'unitText' 会更合适吗？