Переключение между светлым и темным режимами с помощью JavaScript

Aug 18 2020

Это код, написанный на курсе, который я сейчас беру с Udemy. Он служит основным переключателем для переключения между светлым и темным режимами. Сюда входят панель навигации, фон, изображения и значок, который меняется с солнца на луну.

Задача после урока заключалась в том, чтобы очистить код и сделать его СУХИМ. Я уже сделал это с некоторым кодом. Но есть некоторые случаи, когда это все еще повторяется, например, 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

Одна вещь, которую вы могли бы обновить, - это то, как вы используете ternary operatorfor isDark.

Тернарные операторы используются для возврата чего-либо на основе логического ответа, поэтому либо возвращают X, если истинно, либо 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])
}