动态响应式设计：JavaScript 持续获取与监听窗口尺寸变化

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

  // 假设页面中有一个id为"app"的元素用于显示尺寸
  const appElement = document.getElementById("app");
  if (appElement) {
    appElement.innerHTML = `当前窗口宽度: ${newWidth}px, 高度: ${newHeight}px`;
    // 在这里可以执行其他基于新尺寸的逻辑，例如调整布局或重新计算元素位置
  } else {
    console.log(`当前窗口尺寸: 宽度 ${newWidth}px, 高度 ${newHeight}px`);
  }
}

// 1. 页面加载时立即获取一次初始尺寸
handleResize();

// 2. 注册resize事件监听器，以便在窗口大小变化时持续更新
window.addEventListener("resize", handleResize);

// 注意事项：
// 在某些单页应用（SPA）中，如果不再需要监听，
// 应该在组件卸载或页面离开时移除事件监听器，防止内存泄漏。
// window.removeEventListener("resize", handleResize);

import { useEffect, useState } from 'react';

/**
 * 自定义 Hook，用于获取并持续更新窗口尺寸
 * @returns {object} 包含 width 和 height 属性的对象
 */
export function useWindowSize() {
  const [windowSize, setWindowSize] = useState({
    width: undefined,
    height: undefined
  });

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

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

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

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

  return windowSize;
}

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

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

  return (
    <div>
      <h1>我的响应式组件</h1>
      <p>当前窗口宽度: {width || '未知'}px</p>
      <p>当前窗口高度: {height || '未知'}px</p>
      {/* 根据width和height值渲染不同的内容或样式 */}
      {width && width < 768 ? (
        <p>这是一个移动设备布局</p>
      ) : (
        <p>这是一个桌面设备布局</p>
      )}
    </div>
  );
}

export default MyResponsiveComponent;

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(); // 初始调用不需要防抖