JavaScript中实时获取窗口尺寸：响应式设计实践

let currentWidth = window.innerWidth;
let currentHeight = window.innerHeight;

console.log(`当前窗口宽度: ${currentWidth}px`);
console.log(`当前窗口高度: ${currentHeight}px`);

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

  // 在这里可以执行任何需要响应窗口尺寸变化的操作
  // 例如，更新DOM元素的内容，重新计算布局等
  document.getElementById("app").innerHTML = `
    当前窗口尺寸: 宽度 ${newWidth}px, 高度 ${newHeight}px
  `;

  console.log(`窗口尺寸已更新: 宽度 ${newWidth}px, 高度 ${newHeight}px`);
}

// 添加事件监听器，当窗口尺寸变化时调用handleResize函数
window.addEventListener("resize", handleResize);

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

// 注意：在单页应用或组件生命周期中，
// 建议在不再需要监听时移除事件监听器，以防止内存泄漏
// window.removeEventListener("resize", handleResize);

import { useEffect, useState } from 'react';

/**
 * 自定义Hook，用于实时获取浏览器窗口的宽度和高度
 * @returns {object} 包含width和height属性的对象
 */
export function useWindowSize() {
  // 使用useState管理窗口尺寸状态
  const [windowSize, setWindowSize] = useState({
    width: undefined, // 初始值设为undefined，表示尚未获取
    height: undefined
  });

  useEffect(() => {
    // 定义处理窗口尺寸变化的函数
    function handleResize() {
      setWindowSize({
        width: window.innerWidth,
        height: window.innerHeight
      });
    }

    // 在组件挂载时添加事件监听器
    window.addEventListener('resize', handleResize);

    // 立即调用一次，以获取初始尺寸
    handleResize();

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

  return windowSize;
}

import React from 'react';
import { useWindowSize } from './useWindowSize'; // 假设useWindowSize Hook在同一目录下

function MyResponsiveComponent() {
  const { width, height } = useWindowSize(); // 调用自定义Hook获取窗口尺寸

  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;