本篇接着针对关于 DOM 的各个 Hook 封装进行解读。,管理 DOM 全屏的 Hook。,该 hook 主要是依赖 screenfull[1] 这个 npm 包进行实现的。,选择它的原因，估计有两个：,大概介绍几个它的 API。,来看该 hook 的封装：,首先是 onChange 事件中，判断是否是全屏，从而触发进入全屏的函数或者退出全屏的函数。当退出全屏的时候，卸载 change 事件。,手动进入全屏函数，支持传入 ref 设置需要全屏的元素。并通过 screenfull.request 进行设置，并监听 change 事件。,退出全屏方法，调用 screenfull.exit()。,最后通过 toggleFullscreen，根据当前状态，调用上面两个方法，达到切换全屏状态的效果。,监听 DOM 元素是否有鼠标悬停。,主要实现原理是监听 mouseenter 触发 onEnter 事件，切换状态为 true，监听 mouseleave 触发 onLeave 事件，切换状态为 false。代码简单，如下：,监听页面是否可见。,这个 hook 主要使用了 Document.visibilityState 这个 API。先简单看下这个 API：,Document.visibilityState （只读属性）, 返回document的可见性， 即当前可见元素的上下文环境。由此可以知道当前文档 (即为页面) 是在背后， 或是不可见的隐藏的标签页，或者 (正在) 预渲染。可用的值如下：,典型用法是防止当页面正在渲染时加载资源，或者当页面在背景中或窗口最小化时禁止某些活动。,最后看这个 hook 的实现就很简单了：,[1]screenfull: https://www.npmjs.com/package/screenfull,
© 版权声明
文章版权归作者所有，未经允许请勿转载。
">