JavaScript를 사용하여 밝은 모드와 어두운 모드 간 전환

Question

이것은 내가 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]);
}

Answer 1

업데이트 할 수있는 한 가지는 ternary operatorfor isDark.

삼항 연산자는 부울 응답을 기반으로 무언가를 반환하는 데 사용되므로 true이면 X를 반환하고 false이면 Y를 반환합니다.

그러나 사용할 때마다 전달되는 명령문을 평가합니다. 이 경우 두 번 모두 평가하고 isDark있습니다. 평균적인 웹 사이트의 경우 처리 시간에는 영향을 미치지 않지만 고려해야 할 사항입니다.

대신 고전적인 if / else 문을 사용하면 단일 평가에서 더 많은 코드를 실행할 수 있습니다.

이것은 sleek looking삼항 이 아니며 더 많은 코드 라인이지만 필요할 때 더 많은 기능을 제공합니다.

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