面试题：JavaScript 优化处理视口大小变化的复杂场景

Question

假设在一个复杂的Web应用中，有多个模块都需要根据视口大小变化做出不同反应（例如，某些元素显示或隐藏，某些布局重新计算）。请设计一个高效的JavaScript方案来管理这些视口大小变化的响应逻辑，尽量减少性能损耗，并阐述设计思路。

Answer 1

设计思路

1. 事件委托：使用window对象的resize事件来监听视口大小变化。但由于resize事件触发频率高，直接在事件处理函数中执行复杂逻辑会导致性能问题，所以采用节流或防抖技术。
2. 模块化管理：将不同模块的响应逻辑分开管理，便于维护和扩展。每个模块负责自己的视口相关逻辑，通过一个中央管理器来协调。
3. 数据驱动：用数据来描述每个模块在不同视口大小下的状态，这样可以通过简单修改数据来改变响应行为，而无需大量修改代码。

代码实现

// 防抖函数
function debounce(func, delay) {
    let timer;
    return function() {
        const context = this;
        const args = arguments;
        clearTimeout(timer);
        timer = setTimeout(() => {
            func.apply(context, args);
        }, delay);
    };
}

// 中央管理器
const viewportManager = {
    modules: [],
    register(module) {
        this.modules.push(module);
    },
    update() {
        this.modules.forEach(module => module.update());
    }
};

// 模块示例
const module1 = {
    element: document.getElementById('module1 - element'),
    smallViewport: { display: 'none' },
    largeViewport: { display: 'block' },
    update() {
        if (window.innerWidth < 768) {
            Object.assign(this.element.style, this.smallViewport);
        } else {
            Object.assign(this.element.style, this.largeViewport);
        }
    }
};

viewportManager.register(module1);

window.addEventListener('resize', debounce(viewportManager.update, 200));
// 初始化调用
viewportManager.update();

这样，每个模块负责自己的视口响应逻辑，通过中央管理器统一管理，利用防抖函数减少resize事件频繁触发带来的性能损耗。