Beralih antara mode terang dan gelap menggunakan JavaScript

Question

Ini adalah beberapa kode yang ditulis dalam kursus yang sedang saya ikuti di Udemy. Ini berfungsi sebagai sakelar sakelar dasar untuk beralih antara mode terang dan gelap. Ini termasuk bilah navigasi, latar belakang, gambar, dan ikon yang berubah dari matahari ke bulan.

Tujuannya setelah pelajaran adalah untuk membersihkan kode dan membuatnya KERING. Saya sudah melakukannya untuk beberapa kode. Tetapi ada beberapa contoh di mana itu masih berulang, misalnya isDarkdalam lightDarkModefungsi saya . Apakah ada cara untuk menghilangkan penggunaan berulang 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

Satu hal yang dapat Anda perbarui adalah cara Anda menggunakan ternary operatorfor isDark.

Operator terner digunakan untuk mengembalikan sesuatu berdasarkan respons boolean, jadi mengembalikan X jika benar, atau Y jika salah.

Namun, setiap kali digunakan itu mengevaluasi pernyataan yang diteruskan kepadanya. Dalam hal ini kedua kali itu mengevaluasi isDark. Untuk situs web rata-rata, ini tidak akan memengaruhi waktu pemrosesan Anda, tetapi ini adalah sesuatu yang perlu dipikirkan.

Sebaliknya, pernyataan if / else klasik akan memungkinkan Anda menjalankan lebih banyak kode dari satu evaluasi.

Anda akan melihat ini tidak sebagai sleek lookingterner dan bahkan lebih banyak baris kode, tetapi memberikan lebih banyak kemampuan saat Anda membutuhkannya.

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