Переключение между светлым и темным режимами с помощью JavaScript
Это код, написанный на курсе, который я сейчас беру с 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]);
}
Ответы
Одна вещь, которую вы могли бы обновить, - это то, как вы используете ternary operator
for 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])
}