在前端开发中，经常需要获取浏览器窗口的大小、位置等信息，以便进行页面布局调整。而 npm 包 window-watcher 提供了一种简单方便的解决方案，可轻松获取这些信息。本文将介绍如何使用 window-watcher 包以及其使用时需要注意的问题。
安装 window-watcher
使用 npm 安装 window-watcher 如下：
npm install window-watcher --save
使用 window-watcher
初始化
在使用 window-watcher 之前，首先需要初始化：
import windowWatcher from 'window-watcher'; windowWatcher.init();
在 React 或 Vue 等框架中，可以在组件的生命周期中调用 windowWatcher.init() 进行初始化。需要注意的是，该方法只需要调用一次。
获取窗口信息
windowWatcher 对象提供了获取窗口大小和位置的方法：
// 获取窗口的宽度和高度
const { width, height } = windowWatcher.getSize();
// 获取窗口相对于屏幕左上角的位置
const { top, left } = windowWatcher.getPosition();监听窗口变化
windowWatcher 对象还提供了监听窗口变化的方法，可以通过该方法在窗口大小或位置变化时进行事件响应：
-- -------------------- ---- ------- -- --------- -------------------------- -- ------ ------ -- -- - ---------------------------- - ------------ --- -- --------- ------------------------ -- ---- ---- -- -- - ---------------------------- --------- ---
销毁
在页面离开时，需要调用 windowWatcher.destroy() 方法进行清理：
windowWatcher.destroy();
注意事项
初始化顺序
在多个组件中使用 window-watcher 时，需要注意初始化顺序。由于 windowWatcher.init() 只需要调用一次，因此需要确保在任何组件中第一次调用 init()，而在最后一个组件销毁时调用 destroy()。
组件挂载
在 React 或 Vue 中使用 window-watcher 时，需要在组件挂载后再进行初始化。否则可能会在初始化时获取到错误的窗口大小或位置。
性能问题
在窗口调整造成频繁的 resize 事件时，监听函数可能会频繁触发，从而影响页面性能。因此，如果不需要实时获得窗口大小变化的情况下，可以适当增加延时，减少事件触发频率。
示例代码
下面是一个使用 window-watcher 包的示例代码：
-- -------------------- ---- -------
------ ------ - ---------- -------- - ---- --------
------ ------------- ---- -----------------
-------- -------- -
----- ------ -------- - ----------------------------------
----- ----- ------- - --------------------------------------
------------ -- -
-- ---
---------------------
-- --------
-------------------------- ---------
-- --------
------------------------ --------
-- ----------
------ -- -- -
------------------------
--
-- ----
------ -
-----
-------------------- - -----------------
------------------- -------------
------
--
-以上代码通过 useState 和 useEffect 钩子完成了 window-watcher 包的初始化和监听，以及组件销毁时的清理操作。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671118dd3466f61ffe411