Basculer entre les modes clair et sombre à l'aide de JavaScript
Il s'agit d'un code écrit dans un cours que je suis en train de suivre sur Udemy. Il sert d'interrupteur à bascule de base pour basculer entre les modes clair et sombre. Cela inclut la barre de navigation, l'arrière-plan, les images et l'icône qui passe d'un soleil à une lune.
L'objectif après la leçon était de nettoyer le code et de le rendre SEC. Je l'ai déjà fait pour une partie du code. Mais il y a des cas où cela se répète encore, par exemple isDark
dans ma lightDarkMode
fonction. Existe-t-il un moyen d'éliminer l'utilisation répétitive de 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]);
}
Réponses
Une chose que vous pourriez mettre à jour est la façon dont vous utilisez le ternary operator
for isDark
.
Les opérateurs ternaires sont utilisés pour renvoyer quelque chose en fonction d'une réponse booléenne, donc soit renvoyer X si vrai, soit Y si faux.
Cependant, chaque fois qu'il est utilisé, il évalue l'instruction qui lui est transmise. Dans ce cas, les deux fois, il évalue isDark
. Pour le site Web moyen, cela n'affectera pas votre temps de traitement, mais c'est quelque chose à penser.
Au lieu de cela, une instruction if/else classique vous permettrait d'exécuter plus de code à partir d'une seule évaluation.
Vous remarquerez que ce n'est pas aussi sleek looking
ternaire et qu'il y a encore plus de lignes de code, mais donne plus de capacités quand vous en avez besoin.
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])
}