面试题：JavaScript 结合 CSS 实现响应式视觉交互效果的深度剖析

实现架构

HTML 结构：搭建基础的页面结构，确保元素有合适的 id 或 class 以便在 CSS 和 JavaScript 中引用。例如，对于一个包含图片、文本等元素的页面：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Responsive Web App</title>
</head>
<body>
    <div id="main-content">
        <img id="main-image" src="image.jpg" alt="Main Image">
        <p id="main-text">This is some sample text.</p>
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS：
- 使用媒体查询（Media Queries）来处理不同屏幕尺寸和设备方向的样式变化。例如：

/* 屏幕宽度小于 600px 时的样式 */
@media (max - width: 600px) {
    #main - image {
        width: 100%;
        height: auto;
    }
    #main - text {
        font - size: 14px;
    }
}

/* 设备处于横屏状态时的样式 */
@media (orientation: landscape) {
    #main - content {
        flex - direction: row;
    }
}

- 定义基础样式，如字体、颜色、布局等，为不同状态提供基础样式模板。

3. JavaScript： - 监听窗口尺寸变化事件 window.addEventListener('resize', handleResize)，在回调函数 handleResize 中处理因窗口尺寸变化导致的视觉效果改变。 - 监听设备方向变化事件 window.addEventListener('orientationchange', handleOrientationChange)，相应地调整视觉效果。 - 对于用户交互事件，如点击 document.getElementById('button - id').addEventListener('click', handleClick)，滚动 window.addEventListener('scroll', handleScroll) 等，在对应的回调函数中实现视觉效果的改变。

状态管理

全局变量：可以在 JavaScript 中定义一些全局变量来表示当前状态，例如 let isMobile = false 表示当前是否为移动设备状态，let isLandscape = false 表示当前是否为横屏状态。
对象存储：使用一个对象来存储多个相关状态，如 const appState = { screenWidth: window.innerWidth, isScrolling: false }，这样便于统一管理和维护状态。
状态更新函数：为了保证状态的一致性和可维护性，定义专门的函数来更新状态。例如：

function updateScreenWidth() {
    appState.screenWidth = window.innerWidth;
    if (appState.screenWidth < 600) {
        appState.isMobile = true;
    } else {
        appState.isMobile = false;
    }
}

保证代码的可维护性和扩展性

模块化：将不同功能的代码封装成模块，例如将处理屏幕尺寸变化的代码放在 screenSize.js 文件中，处理用户交互的代码放在 userInteraction.js 文件中。在主 JavaScript 文件中引入这些模块，如：

import { handleResize } from './screenSize.js';
import { handleClick } from './userInteraction.js';

window.addEventListener('resize', handleResize);
document.getElementById('button - id').addEventListener('click', handleClick);

事件委托：对于具有相同父元素的多个子元素的交互事件，使用事件委托。例如，有多个按钮在一个 div 中，可以在父 div 上监听点击事件，然后根据 event.target 判断具体点击的是哪个按钮，这样可以减少事件监听器的数量，提高性能和可维护性。

<div id="button - container">
    <button id="button1">Button 1</button>
    <button id="button2">Button 2</button>
</div>

document.getElementById('button - container').addEventListener('click', function (event) {
    if (event.target.id === 'button1') {
        // 处理按钮 1 的点击逻辑
    } else if (event.target.id === 'button2') {
        // 处理按钮 2 的点击逻辑
    }
});

代码注释：在关键代码段添加注释，解释代码的功能和目的。例如，在处理复杂的样式计算或状态更新的函数中添加注释，使其他开发者能够快速理解代码逻辑。
使用设计模式：对于复杂的交互逻辑，可以考虑使用设计模式，如观察者模式。在状态发生变化时，通知所有相关的视图进行更新，这样可以使代码结构更加清晰，易于扩展和维护。例如，当屏幕尺寸变化时，所有依赖于屏幕尺寸的视觉元素都能通过观察者模式自动更新。

星途面试题库

面试题：JavaScript 结合 CSS 实现响应式视觉交互效果的深度剖析

知识考点

面试题答案

实现架构

状态管理

保证代码的可维护性和扩展性