【前端工具类】002-监听窗口尺寸变化工具类：WindowSizeTracker

一、ts 传统写法

1、工具类

// 定义一个接口用于描述窗口尺寸信息
interface WindowSize {width: number;height: number;
}// 定义一个类型别名，表示窗口尺寸改变时的回调函数类型
type WindowSizeChangeListener = (size: WindowSize) => void;export class WindowSizeTracker {// 储存窗口尺寸改变时的回调函数private listeners: WindowSizeChangeListener[] = [];// 储存当前窗口尺寸private size: WindowSize = {width: window.innerWidth,height: window.innerHeight,};// 定义一个方法用于添加窗口尺寸改变时的回调函数public addListener(listener: WindowSizeChangeListener): void {// 默认立即调用一次回调函数，通知窗口尺寸已改变listener(this.size);this.listeners.push(listener);}// 定义一个方法用于移除窗口尺寸改变时的回调函数public removeListener(listener: WindowSizeChangeListener): void {const index = this.listeners.indexOf(listener);if (index !== -1) {this.listeners.splice(index, 1);}}// 定义一个方法用于触发所有回调函数，通知窗口尺寸已改变private notifyListeners(): void {this.listeners.forEach((listener) => {listener(this.size);});}// 定义一个方法用于监听窗口尺寸改变事件private handleResize(): void {// 更新窗口尺寸信息this.size = {width: window.innerWidth,height: window.innerHeight,};// 触发所有回调函数，通知窗口尺寸已改变this.notifyListeners();}// 构造函数，在创建实例时添加窗口尺寸改变事件的监听器constructor() {window.addEventListener("resize", () => {this.handleResize();});}
}

2、使用示例

import {WindowSizeTracker} from "@/utils/WindowSizeTracker";// 示例用法const tracker = new WindowSizeTracker();// 添加一个回调函数，用于在窗口尺寸改变时打印当前窗口尺寸tracker.addListener((size) => {console.log(`窗口尺寸已改变为：${size.width} x ${size.height}`);});// 移除上面添加的回调函数tracker.removeListener((size) => {console.log(`窗口尺寸已改变为：${size.width} x ${size.height}`);});

二、Vue3 usexxx 写法

1、代码

import { ref, onMounted, onUnmounted } from 'vue';export function useWindowSize() {const width = ref(window.innerWidth);const height = ref(window.innerHeight);const handleResize = () => {width.value = window.innerWidth;height.value = window.innerHeight;};onMounted(() => {window.addEventListener('resize', handleResize);});onUnmounted(() => {window.removeEventListener('resize', handleResize);});return {width,height,};
}

2、使用示例

<script lang="ts" setup>
import { useWindowSize } from "@/utils/WindowSizeTracker";
import {watch} from "vue";const { width, height } = useWindowSize();// 同时监听 width 和 height
watch([width, height], ([width, height]) => {console.log(width, height);
});</script>