Passaggio dalla modalità chiara a quella scura tramite JavaScript
Questo è un codice scritto in un corso che sto seguendo su Udemy. Serve come interruttore a levetta di base per passare dalla modalità chiara a quella scura. Ciò include la barra di navigazione, lo sfondo, le immagini e l'icona che cambia da sole a luna.
L'obiettivo dopo la lezione era ripulire il codice e renderlo SECCO. L'ho già fatto per parte del codice. Ma ci sono alcuni casi in cui si ripete ancora, per esempio isDark
nella mia lightDarkMode
funzione. C'è un modo per eliminare l'uso ripetitivo di 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]);
}
Risposte
Una cosa che potresti aggiornare è come stai usando ternary operator
for isDark
.
Gli operatori ternari vengono utilizzati per restituire qualcosa in base a una risposta booleana, quindi restituisci X se vero o Y se falso.
Tuttavia, ogni volta che viene utilizzato, valuta l'istruzione che gli viene passata. In questo caso entrambe le volte sta valutando isDark
. Per il sito Web medio, ciò non influirà sul tempo di elaborazione, ma è qualcosa a cui pensare.
Invece una classica istruzione if/else ti permetterebbe di eseguire più codice da una singola valutazione.
Noterai che questo non è sleek looking
così ternario ed è ancora più righe di codice, ma offre più capacità quando ne hai bisogno.
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])
}