JavaScriptを使用してライトモードとダークモードを切り替える
Aug 18 2020
これは、私がUdemyを受講するのに忙しいコースで書かれたコードです。これは、ライトモードとダークモードを切り替えるための基本的なトグルスイッチとして機能します。これには、ナビゲーションバー、背景、画像、太陽から月に変わるアイコンが含まれます。
レッスン後の目的は、コードをクリーンアップしてDRYにすることでした。私はすでにいくつかのコードに対してそうしました。しかし、たとえばisDark
私のlightDarkMode
関数のように、それがまだ繰り返される場合がいくつかあります。の繰り返し使用を排除する方法はありisDark
ますか?
const toggleSwitch = document.querySelector('input[type="checkbox"]');
const nav = document.getElementById('nav');
const toggleIcon = document.getElementById('toggle-icon');
const textBox = document.getElementById('text-box');
const darkLightTheme = ['dark', 'light'];
function imageMode(color) {
image1.src = `img/undraw_proud_coder_${color}.svg`; image2.src = `img/undraw_feeling_proud_${color}.svg`;
image3.src = `img/undraw_conceptual_idea_${color}.svg`;
}
lightDarkMode = (isDark) => {
nav.style.backgroundColor = isDark ? 'rgb(0 0 0 / 50%)' : 'rgb(255 255 255 / 50%)';
textBox.style.backgroundColor = isDark ? 'rgb(255 255 255 / 50%)' : 'rgb(0 0 0 / 50%)';
toggleIcon.children[0].textContent = isDark ? 'Dark Mode' : 'Light Mode';
isDark ? toggleIcon.children[1].classList.replace('fa-sun', 'fa-moon') : toggleIcon.children[1].classList.replace('fa-moon', 'fa-sun');
isDark ? imageMode(darkLightTheme[0]) : imageMode(darkLightTheme[1]);
}
回答
2 imvain2 Aug 20 2020 at 00:55
更新できることの1つは、ternary operator
forをどのように使用しているかですisDark
。
三項演算子はブール応答に基づいて何かを返すために使用されるため、trueの場合はXを返し、falseの場合はYを返します。
ただし、使用されるたびに、渡されるステートメントが評価されます。この場合、どちらの場合も評価中isDark
です。平均的なWebサイトの場合、これは処理時間には影響しませんが、考慮する必要があります。
代わりに、従来のif / elseステートメントを使用すると、1回の評価でより多くのコードを実行できます。
これはsleek looking
3値ほどではなく、さらに多くのコード行であることに気付くでしょうが、必要なときに多くの機能を提供します。
if (isDark) {
toggleIcon.children[1].classList.replace('fa-sun', 'fa-moon')
imageMode(darkLightTheme[0])
} else {
toggleIcon.children[1].classList.replace('fa-moon', 'fa-sun')
imageMode(darkLightTheme[1])
}