大家都能看得懂的源码 – 那些关于DOM的常见Hook封装(二)

  • 大家都能看得懂的源码 – 那些关于DOM的常见Hook封装(二)已关闭评论
  • 20 次浏览
  • A+
所属分类:Web前端
摘要

本文是深入浅出 ahooks 源码系列文章的第十五篇,该系列已整理成文档-地址。觉得还不错,给个 star 支持一下哈,Thanks。

本文是深入浅出 ahooks 源码系列文章的第十五篇,该系列已整理成文档-地址。觉得还不错,给个 star 支持一下哈,Thanks。

本篇接着针对关于 DOM 的各个 Hook 封装进行解读。

useFullscreen

管理 DOM 全屏的 Hook。

该 hook 主要是依赖 screenfull 这个 npm 包进行实现的。

选择它的原因,估计有两个:

  • 它的兼容性好,兼容各个浏览器的全屏 API。
  • 简单,包体积小。压缩后只要 1.1 k。

大概介绍几个它的 API。

  • .request(element, options?)。使一个元素全屏显示。默认元素是 <html>
  • .exit()。退出全屏。
  • .toggle(element, options?)。假如目前是全屏,则退出,否则进入全屏。
  • .on(event, function)。添加一个监听器,用于当浏览器切换到全屏或切换出全屏或出现错误时。event 支持 'change' 或者 'error'。另外两种写法:.onchange(function).onerror(function)
  • .isFullscreen。判断是否是全屏。
  • .isEnabled。判断当前环境是否支持全屏。

来看该 hook 的封装:

首先是 onChange 事件中,判断是否是全屏,从而触发进入全屏的函数或者退出全屏的函数。
当退出全屏的时候,卸载 change 事件。

const { onExit, onEnter } = options || {}; // 退出全屏触发 const onExitRef = useLatest(onExit); // 全屏触发 const onEnterRef = useLatest(onEnter); const [state, setState] = useState(false);  const onChange = () => {   if (screenfull.isEnabled) {     const { isFullscreen } = screenfull;     if (isFullscreen) {       onEnterRef.current?.();     } else {       screenfull.off('change', onChange);       onExitRef.current?.();     }     setState(isFullscreen);   } }; 

手动进入全屏函数,支持传入 ref 设置需要全屏的元素。并通过 screenfull.request 进行设置,并监听 change 事件。

// 进入全屏 const enterFullscreen = () => {   const el = getTargetElement(target);   if (!el) {     return;   }    if (screenfull.isEnabled) {     try {       screenfull.request(el);       screenfull.on('change', onChange);     } catch (error) {       console.error(error);     }   } }; 

退出全屏方法,调用 screenfull.exit()

// 退出全屏 const exitFullscreen = () => {   if (!state) {     return;   }   if (screenfull.isEnabled) {     screenfull.exit();   } }; 

最后通过 toggleFullscreen,根据当前状态,调用上面两个方法,达到切换全屏状态的效果。

// 切换模式 const toggleFullscreen = () => {   if (state) {     exitFullscreen();   } else {     enterFullscreen();   } }; 

useHover

监听 DOM 元素是否有鼠标悬停。

主要实现原理是监听 mouseenter 触发 onEnter 事件,切换状态为 true,监听 mouseleave 触发 onLeave 事件,切换状态为 false。代码简单,如下:

export default (target: BasicTarget, options?: Options): boolean => {   const { onEnter, onLeave } = options || {};   const [state, { setTrue, setFalse }] = useBoolean(false);   // 通过监听 mouseenter 判断有鼠标悬停   useEventListener(     'mouseenter',     () => {       onEnter?.();       setTrue();     },     {       target,     },   );    // mouseleave 没有鼠标悬停   useEventListener(     'mouseleave',     () => {       onLeave?.();       setFalse();     },     {       target,     },   );    return state; }; 

useDocumentVisibility

监听页面是否可见。

这个 hook 主要使用了 Document.visibilityState 这个 API。先简单看下这个 API:

Document.visibilityState (只读属性), 返回document的可见性, 即当前可见元素的上下文环境。由此可以知道当前文档 (即为页面) 是在背后, 或是不可见的隐藏的标签页,或者 (正在) 预渲染。可用的值如下:

  • 'visible' : 此时页面内容至少是部分可见. 即此页面在前景标签页中,并且窗口没有最小化。
  • 'hidden' : 此时页面对用户不可见。即文档处于背景标签页或者窗口处于最小化状态,或者操作系统正处于 '锁屏状态' 。
  • 'prerender' : 页面此时正在渲染中,因此是不可见的。文档只能从此状态开始,永远不能从其他值变为此状态。

典型用法是防止当页面正在渲染时加载资源,或者当页面在背景中或窗口最小化时禁止某些活动。

最后看这个 hook 的实现就很简单了:

  • 通过 document.visibilityState 判断是否可见。
  • 通过 visibilitychange 事件,更新结果。
const getVisibility = () => {   if (!isBrowser) {     return 'visible';   }   //  Document.visibilityState (只读属性), 返回document的可见性, 即当前可见元素的上下文环境。   return document.visibilityState; };  function useDocumentVisibility(): VisibilityState {   const [documentVisibility, setDocumentVisibility] = useState(() => getVisibility());    useEventListener(     // 监听该事件     'visibilitychange',     () => {       setDocumentVisibility(getVisibility());     },     {       target: () => document,     },   );   return documentVisibility; } 

本文已收录到个人博客中,欢迎关注~