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 operatorforをどのように使用しているかですisDark

三項演算子はブール応答に基づいて何かを返すために使用されるため、trueの場合はXを返し、falseの場合はYを返します。

ただし、使用されるたびに、渡されるステートメントが評価されます。この場合、どちらの場合も評価中isDarkです。平均的なWebサイトの場合、これは処理時間には影響しませんが、考慮する必要があります。

代わりに、従来のif / elseステートメントを使用すると、1回の評価でより多くのコードを実行できます。

これはsleek looking3値ほどではなく、さらに多くのコード行であることに気付くでしょうが、必要なときに多くの機能を提供します。

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])
}