Umschalten zwischen hellem und dunklem Modus mit JavaScript

Question

Dies ist ein Code, der in einem Kurs geschrieben wurde, den ich gerade bei Udemy belege. Es dient als einfacher Kippschalter zum Umschalten zwischen Hell- und Dunkelmodus. Dazu gehören die Navigationsleiste, der Hintergrund, Bilder und das Symbol, das sich von einer Sonne zu einem Mond ändert.

Das Ziel nach der Lektion war es, den Code zu bereinigen und ihn TROCKEN zu machen. Ich habe dies bereits mit einigen Codes getan. Aber es gibt einige Fälle, in denen es immer noch wiederholt wird, zum Beispiel isDarkin meiner lightDarkModeFunktion. Gibt es eine Möglichkeit, die wiederholte Verwendung von zu beseitigen 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]);
}

Answer 1

Eine Sache, die Sie aktualisieren könnten, ist die Verwendung von ternary operatorfor isDark.

Ternäre Operatoren werden verwendet, um etwas basierend auf einer booleschen Antwort zurückzugeben, also geben Sie entweder X zurück, wenn wahr, oder Y, wenn falsch.

Jedoch wertet es jedes Mal, wenn es verwendet wird, die an es übergebene Anweisung aus. In diesem Fall wird beide Male ausgewertet isDark. Bei einer durchschnittlichen Website hat dies keinen Einfluss auf Ihre Bearbeitungszeit, aber Sie sollten darüber nachdenken.

Stattdessen würde eine klassische if/else-Anweisung es Ihnen ermöglichen, mehr Code für eine einzige Auswertung auszuführen.

Sie werden feststellen, dass dies nicht so sleek lookingternär ist und noch mehr Codezeilen umfasst, aber mehr Funktionen bietet, wenn Sie sie benötigen.

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])
}