JavaScript kullanarak açık ve koyu mod arasında geçiş yapma

Question

Bu, Udemy ile meşgul olduğum bir kursta yazılmış bir kod. Açık ve koyu mod arasında geçiş yapmak için temel bir geçiş anahtarı görevi görür. Bu, gezinme çubuğunu, arka planı, resimleri ve güneşten aya değişen simgeyi içerir.

Dersten sonraki amaç kodu temizlemek ve KURU yapmaktı. Bunu kodun bir kısmına zaten yaptım. Ama hala tekrar ettiği bazı durumlar var, örneğin isDarkbenim lightDarkModefonksiyonumda. Tekrarlayan kullanımını ortadan kaldırmanın bir yolu var mı 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

Güncelleyebileceğiniz bir şey, ternary operatorfor isDark.

Üçlü operatörler, bir boole yanıtına göre bir şey döndürmek için kullanılır, bu nedenle ya doğruysa X'i ya da yanlışsa Y'yi döndürür.

Ancak her kullanıldığında kendisine aktarılan ifadeyi değerlendiriyor. Bu durumda iki kere de değerlendiriyor isDark. Ortalama bir web sitesi için bu, işlem sürenizi etkilemez, ancak üzerinde düşünülmesi gereken bir konudur.

Bunun yerine klasik bir if / else ifadesi, tek bir değerlendirmeden daha fazla kod çalıştırmanıza izin verir.

Bunun sleek lookingüçlü kadar olmadığını ve daha fazla kod satırı olduğunu fark edeceksiniz , ancak ihtiyacınız olduğunda daha fazla yetenek sağlar.

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