Passaggio dalla modalità chiara a quella scura tramite JavaScript

Aug 18 2020

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 isDarknella mia lightDarkModefunzione. 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

2 imvain2 Aug 20 2020 at 00:55

Una cosa che potresti aggiornare è come stai usando ternary operatorfor 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 lookingcosì 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])
}