JavaScript响应式设计：正确管理HTML元素类与窗口尺寸变化

let displaySize = ''; // 全局变量

function changeToMobile() {
    document.querySelector('.custom-menu-class').classList.remove('desktop-class');
    document.querySelector('.custom-menu-class').classList.add('mobile-class');
}

function changeToDesktop() {
    document.querySelector('.custom-menu-class').classList.remove('mobile-class');
    document.querySelector('.custom-menu-class').classList.add('desktop-class');
}

function displaySizeReader() {
    if (screen.width < 992) { // 问题点1：使用了 screen.width
        let displaySize = 'mobile'; // 问题点2：声明了新的局部变量
        console.log(displaySize); // 此时输出的是局部变量的值
    }
    else {
        let displaySize = 'desktop'; // 问题点2：声明了新的局部变量
        console.log(displaySize); // 此时输出的是局部变量的值
    }

    function displayChanger() {
        // 在这里，displaySize 始终是全局变量，其值仍是初始的空字符串 ''
        if(displaySize == "mobile") {
            changeToMobile();
        } else if(displaySize == "desktop") {
            changeToDesktop();
        } else {
            // 由于 displaySize 始终为空，此分支会被执行
            changeToMobile();
        }
    }
    displayChanger();
}

displaySizeReader(); // 页面加载时执行一次

if (screen.width < 992) {
    let displaySize = 'mobile'; // 这里声明了一个新的局部变量 displaySize
} else {
    let displaySize = 'desktop'; // 这里也声明了一个新的局部变量 displaySize
}

function displaySizeReader() {
    if (window.innerWidth < 992) { // 使用 window.innerWidth
        displaySize = 'mobile'; // 移除 let 关键字，更新全局变量
        console.log("Current displaySize (inside reader):", displaySize);
    }
    else {
        displaySize = 'desktop'; // 移除 let 关键字，更新全局变量
        console.log("Current displaySize (inside reader):", displaySize);
    }

    function displayChanger() {
        // 此时 displaySize 已是全局变量的正确值
        if(displaySize === "mobile") { // 建议使用全等运算符 ===
            changeToMobile();
        } else if(displaySize === "desktop") {
            changeToDesktop();
        } else {
            // 兜底逻辑，在当前修正下 displaySize 不会是空字符串了
            changeToMobile();
        }
    }
    displayChanger();
}

// 1. 定义一个全局变量来存储当前显示尺寸状态
let displaySize = '';

// 2. 定义函数来添加/移除移动端样式类
function changeToMobile() {
    const menuElement = document.querySelector('.custom-menu-class');
    if (menuElement) { // 检查元素是否存在
        menuElement.classList.remove('desktop-class');
        menuElement.classList.add('mobile-class');
        console.log("Applied mobile-class");
    }
}

// 3. 定义函数来添加/移除桌面端样式类
function changeToDesktop() {
    const menuElement = document.querySelector('.custom-menu-class');
    if (menuElement) { // 检查元素是否存在
        menuElement.classList.remove('mobile-class');
        menuElement.classList.add('desktop-class');
        console.log("Applied desktop-class");
    }
}

// 4. 核心逻辑：根据窗口宽度更新 displaySize 并应用样式
function updateDisplayClasses() {
    // 获取浏览器视口宽度，用于响应式判断
    if (window.innerWidth < 992) {
        displaySize = 'mobile'; // 更新全局变量
    } else {
        displaySize = 'desktop'; // 更新全局变量
    }
    console.log("Current displaySize:", displaySize);

    // 根据 displaySize 的值应用相应的样式
    if (displaySize === "mobile") {
        changeToMobile();
    } else if (displaySize === "desktop") {
        changeToDesktop();
    }
    // 理论上，在修正后的逻辑中，displaySize 不会是其他值，无需 else 兜底
}

// 5. 页面加载时立即执行一次，设置初始状态
document.addEventListener('DOMContentLoaded', updateDisplayClasses);

// 6. 监听窗口大小变化事件，实时更新样式
// 注意：resize 事件触发频繁，可能导致性能问题，建议进行防抖处理
window.addEventListener('resize', updateDisplayClasses);

// 辅助：一个简单的HTML结构用于测试
/*
<div class="custom-menu-class">
    这是一个菜单项
</div>

<style>
    .custom-menu-class {
        padding: 10px;
        border: 1px solid #ccc;
        background-color: lightgray;
    }
    .mobile-class {
        background-color: lightcoral;
        font-size: 14px;
        color: white;
    }
    .desktop-class {
        background-color: lightseagreen;
        font-size: 18px;
        color: white;
    }
</style>
*/

let resizeTimer;
const DEBOUNCE_DELAY = 150; // 150毫秒

window.addEventListener('resize', () => {
    clearTimeout(resizeTimer);
    resizeTimer = setTimeout(updateDisplayClasses, DEBOUNCE_DELAY);
});

const mediaQueryMobile = window.matchMedia('(max-width: 991px)');

function handleMediaQueryChange(e) {
    if (e.matches) {
        // 匹配到 max-width: 991px，即移动端尺寸
        changeToMobile();
    } else {
        // 不匹配，即桌面端尺寸
        changeToDesktop();
    }
    console.log("MatchMedia status:", e.matches ? "Mobile" : "Desktop");
}

// 首次加载时执行一次
handleMediaQueryChange(mediaQueryMobile);

// 监听媒体查询状态的变化
mediaQueryMobile.addEventListener('change', handleMediaQueryChange);

/* 默认桌面样式 */
.custom-menu-class {
    background-color: lightseagreen;
    font-size: 18px;
    color: white;
}

/* 移动端样式 */
@media (max-width: 991px) {
    .custom-menu-class {
        background-color: lightcoral;
        font-size: 14px;
        color: white;
    }
}