【前端工具类】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、使用示例
<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>