Chuyển đổi giữa chế độ sáng và tối bằng JavaScript

Question

Đây là một số mã được viết trong một khóa học mà tôi đang bận tham gia Udemy. Nó hoạt động như một công tắc chuyển đổi cơ bản để chuyển đổi giữa chế độ sáng và tối. Điều này bao gồm thanh điều hướng, nền, hình ảnh và biểu tượng thay đổi từ mặt trời thành mặt trăng.

Mục tiêu sau bài học là làm sạch mã và làm cho nó KHÔ. Tôi đã làm như vậy với một số mã. Nhưng có một số trường hợp nó vẫn lặp lại, ví dụ như isDarktrong lightDarkModehàm của tôi . Có cách nào để loại bỏ việc sử dụng lặp đi lặp lại isDarkkhông?

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

Một điều mà bạn có thể cập nhật là cách bạn đang sử dụng ternary operatorfor isDark.

Toán tử bậc ba được sử dụng để trả về thứ gì đó dựa trên phản hồi boolean, do đó, trả về X nếu đúng hoặc Y nếu sai.

Tuy nhiên, mỗi khi nó được sử dụng, nó sẽ đánh giá câu lệnh được chuyển cho nó. Trong trường hợp này, cả hai lần đều đánh giá isDark. Đối với các trang web trung bình, điều này sẽ không ảnh hưởng đến thời gian xử lý của bạn, nhưng đó là điều cần phải suy nghĩ.

Thay vào đó, một câu lệnh if / else cổ điển sẽ cho phép bạn chạy nhiều mã hơn từ một đánh giá duy nhất.

Bạn sẽ nhận thấy đây không phải là mã sleek lookingbậc ba và thậm chí còn nhiều dòng mã hơn, nhưng cung cấp nhiều khả năng hơn khi bạn cần.

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