JavaScript实时获取窗口大小教程

在文章实战开发的过程中，我们经常会遇到一些这样那样的问题，然后要卡好半天，等问题解决了才发现原来一些细节知识点还是没有掌握好。今天golang学习网就整理分享《JavaScript实时获取窗口尺寸教程》，聊聊，希望可以帮助到正在努力赚钱的你。

本文详细介绍了如何使用 JavaScript 动态获取浏览器窗口的实时宽度和高度，并响应窗口大小变化。内容涵盖了原生 JavaScript 的事件监听机制，以及在 React 应用中通过自定义 Hook 实现的封装方法，旨在帮助开发者构建高效、响应式的用户界面。

在现代 Web 开发中，构建响应式布局是不可或缺的一部分。虽然 CSS 媒体查询能处理大多数响应式需求，但在某些场景下，我们需要通过 JavaScript 动态获取并响应浏览器窗口的尺寸变化，例如根据窗口大小调整组件行为、执行复杂的布局计算或触发特定的动画。

实时获取浏览器窗口尺寸的核心方法

JavaScript 提供了 window.innerWidth 和 window.innerHeight 属性，用于获取浏览器视口（viewport）的当前宽度和高度（不包括浏览器工具栏和滚动条）。要实现“持续返回”尺寸，关键在于监听 window 对象的 resize 事件。

1. 使用 window.innerWidth 和 window.innerHeight

这两个属性是获取当前视口尺寸最直接的方式。

• window.innerWidth: 返回浏览器窗口的内部宽度，以像素计。
• window.innerHeight: 返回浏览器窗口的内部高度，以像素计。

这些值会在窗口大小发生变化时实时更新。

2. 监听 resize 事件

为了在窗口尺寸改变时执行特定操作，我们需要为 window 对象添加一个 resize 事件监听器。

/**
 * 处理窗口尺寸变化的函数
 */
function handleResize() {
  const newWidth = window.innerWidth;
  const newHeight = window.innerHeight;

  // 在这里执行你需要根据新尺寸进行的操作
  // 例如，更新 DOM 元素的内容或调整布局
  document.getElementById("app").innerHTML = `
    当前窗口宽度: ${newWidth}px, 
    当前窗口高度: ${newHeight}px
  `;
  console.log(`窗口尺寸更新: 宽度 ${newWidth}px, 高度 ${newHeight}px`);
}

// 注册 resize 事件监听器
window.addEventListener("resize", handleResize);

// 页面加载时立即调用一次，以获取初始尺寸
handleResize();

代码解析：

1. handleResize() 函数: 这是一个回调函数，当 window 的 resize 事件被触发时，它将被执行。在此函数内部，我们获取当前的 window.innerWidth 和 window.innerHeight，并可以根据这些值更新 UI 或执行其他逻辑。
2. window.addEventListener("resize", handleResize): 这行代码将 handleResize 函数注册为 window 对象 resize 事件的监听器。每当用户调整浏览器窗口大小时，handleResize 函数就会被调用。
3. handleResize() (初始调用): 在页面加载完成后，我们通常需要立即调用一次 handleResize 函数，以确保在没有任何 resize 事件发生之前，页面就能正确显示或使用初始的窗口尺寸。

在 React 应用中封装窗口尺寸监听

在 React 等现代前端框架中，为了更好地管理状态和副作用，通常会将这种逻辑封装成自定义 Hook。以下是一个 useWindowSize Hook 的示例，它能在 React 组件中方便地获取和响应窗口尺寸。

import { useEffect, useState } from 'react';

/**
 * 一个自定义 React Hook，用于实时获取和提供浏览器窗口的尺寸。
 * @returns {{width: number | undefined, height: number | undefined}} 包含窗口宽度和高度的对象。
 */
export function useWindowSize() {
  // 使用 useState 存储窗口尺寸，初始值为 undefined
  const [windowSize, setWindowSize] = useState({
    width: undefined,
    height: undefined
  });

  useEffect(() => {
    // 定义处理 resize 事件的回调函数
    function handleResize() {
      // 更新状态
      setWindowSize({
        width: window.innerWidth,
        height: window.innerHeight
      });
    }

    // 注册 resize 事件监听器
    window.addEventListener('resize', handleResize);

    // 组件挂载时立即调用一次，获取初始尺寸
    handleResize();

    // 返回一个清理函数，在组件卸载时移除事件监听器
    return () => window.removeEventListener('resize', handleResize);
  }, []); // 空依赖数组表示此 effect 只在组件挂载和卸载时运行一次

  return windowSize;
}

useWindowSize Hook 的使用示例：

import React from 'react';
import { useWindowSize } from './useWindowSize'; // 假设 useWindowSize 在同一文件或路径下

function MyResponsiveComponent() {
  const { width, height } = useWindowSize();

  if (width === undefined || height === undefined) {
    return <div>正在获取窗口尺寸...</div>;
  }

  return (
    <div>
      <h1>我的响应式组件</h1>
      <p>当前窗口宽度: {width}px</p>
      <p>当前窗口高度: {height}px</p>
      {width < 768 ? (
        <p>这是一个小屏幕设备。</p>
      ) : (
        <p>这是一个大屏幕设备。</p>
      )}
    </div>
  );
}

export default MyResponsiveComponent;

代码解析：

1. useState: 用于在组件中存储和更新 windowSize 状态。初始值设为 undefined，表示尺寸尚未获取。
2. useEffect: 用于处理副作用，即事件监听器的注册和清理。
   • handleResize: 与原生 JS 示例中的函数类似，它获取当前窗口尺寸并更新 windowSize 状态。
   • window.addEventListener('resize', handleResize): 注册事件监听器。
   • handleResize(): 在 useEffect 首次执行时调用一次，确保组件挂载时即有正确的尺寸。
   • return () => window.removeEventListener('resize', handleResize): 这是 useEffect 的清理机制。当组件卸载时，此函数会被调用，从而移除事件监听器，防止内存泄漏。
   • [] (空依赖数组): 确保 useEffect 中的副作用函数只在组件挂载时执行一次，并在组件卸载时清理一次。

最佳实践与注意事项

在实际应用中，处理 resize 事件时需要考虑一些性能和用户体验方面的最佳实践。

1. 性能优化：防抖 (Debouncing) 与节流 (Throttling)

resize 事件在用户拖动窗口时会频繁触发，这可能导致 handleResize 函数被反复调用，如果函数内部执行了复杂的 DOM 操作或计算，可能会引起性能问题。

• 防抖 (Debouncing): 在事件停止触发后的一段时间内才执行回调函数。例如，用户拖动窗口时，每次 resize 事件都会重置一个计时器，只有当停止拖动（即在指定时间内没有新的 resize 事件触发）后，回调函数才会被执行。这适用于只需要在尺寸最终确定时执行一次操作的场景。
• 节流 (Throttling): 在一段时间内只执行一次回调函数。例如，每 200 毫秒最多执行一次 handleResize。这适用于需要持续响应但又不想过于频繁的场景。

可以使用 Lodash 等库提供的 debounce 或 throttle 函数，或者手动实现。

防抖示例：

function debounce(func, delay) {
  let timeout;
  return function(...args) {
    const context = this;
    clearTimeout(timeout);
    timeout = setTimeout(() => func.apply(context, args), delay);
  };
}

const debouncedHandleResize = debounce(handleResize, 200); // 200毫秒防抖

window.addEventListener("resize", debouncedHandleResize);
handleResize(); // 首次调用仍然需要

2. 初始尺寸获取的重要性

无论是原生 JavaScript 还是 React Hook，都应该在组件加载或脚本执行时立即调用一次处理函数，以确保在任何 resize 事件发生之前，应用程序就已经获取并使用了正确的窗口尺寸。

3. 事件监听器的清理

在原生 JavaScript 中，如果页面跳转或元素被移除，需要手动调用 window.removeEventListener()。在 React useEffect 中，通过返回一个清理函数，可以确保在组件卸载时自动移除监听器，避免内存泄漏。

4. 与 CSS Media Queries 的结合

对于大多数基于断点的响应式布局调整，CSS Media Queries 仍然是首选方案，因为它更具声明性且性能更优。JavaScript 应该用于处理那些 CSS 无法直接实现或需要动态计算的响应式行为。

总结

通过 window.innerWidth、window.innerHeight 和 window.addEventListener('resize', ...)，我们可以有效地在 JavaScript 中获取并响应浏览器窗口的尺寸变化。在原生 JS 环境中，需要手动管理事件监听器的注册和清理；而在 React 等框架中，通过自定义 Hook 可以更优雅地封装这一逻辑，实现状态管理和生命周期控制。同时，为了优化性能和用户体验，合理运用防抖和节流技术是至关重要的。

本篇关于《JavaScript实时获取窗口大小教程》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！