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

深碍√TFBOYSˉ_ 2023-09-25 22:13 17阅读 0赞

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

#### 文章目录 ####

*  【前端工具类】002-监听窗口尺寸变化工具类：WindowSizeTracker
 *  一、ts 传统写法
 *   *  1、工具类
     *  2、使用示例
 *  二、Vue3 usexxx 写法
 *   *  1、代码
     *  2、使用示例

## 一、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、使用示例 ###