【前端工具类】002

【前端工具类】002

【前端工具类】002-监听窗口尺寸变化工具类：WindowSizeTracker一、ts 传统写法

1、工具类

代码语言：javascript代码运行次数：0运行复制

// 定义一个接口用于描述窗口尺寸信息
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 {
        ct 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,
        };

        // 触发所有回调函数，通知窗口尺寸已改变
        ();
    }

    // 构造函数，在创建实例时添加窗口尺寸改变事件的
    ctructor() {
        window.addEventListener("resize", () => {
            this.handleResize();
        });
    }
}

2、使用示例

代码语言：javascript代码运行次数：0运行复制

  import {WindowSizeTracker} from "@/utils/WindowSizeTracker";


  // 示例用法
  ct tracker = new WindowSizeTracker();

  // 添加一个回调函数，用于在窗口尺寸改变时打印当前窗口尺寸
  tracker.addListener((size) => {
    cole.log(`窗口尺寸已改变为：${size.width} x ${size.height}`);
  });

  // 移除上面添加的回调函数
  tracker.removeListener((size) => {
    cole.log(`窗口尺寸已改变为：${size.width} x ${size.height}`);
  });

二、Vue uxx 写法

1、代码

代码语言：javascript代码运行次数：0运行复制

import { ref, onMounted, onUnmounted } from 'vue';

export function useWindowSize() {
    ct width = ref(window.innerWidth);
    ct height = ref(window.innerHeight);

    ct handleResize = () => {
        width.value = window.innerWidth;
        height.value = window.innerHeight;
    };

    onMounted(() => {
        window.addEventListener('resize', handleResize);
    });

    onUnmounted(() => {
        window.removeEventListener('resize', handleResize);
    });

    return {
        width,
        height,
    };
}

2、使用示例

代码语言：javascript代码运行次数：0运行复制

<script lang="ts" setup>
import { useWindowSize } from "@/utils/WindowSizeTracker";
import {watch} from "vue";

ct { width, height } = useWindowSize();

// 同时监听 width 和 height
watch([width, height], ([width, height]) => {
  cole.log(width, height);
});

</script>

本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。 原始发表：202-04-06，如有侵权请联系 cloudcommunity@tencent 删除前往查看函数前端事件width工具类