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

news/2024/3/29 3:06:27/文章来源:https://www.cnblogs.com/gopal/p/16638912.html

本文是深入浅出 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;
}

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.luyixian.cn/news_show_2983.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

channel

channel有缓冲与无缓冲同步问题package mainimport ("fmt""time" )func main() {c := make(chan int, 3) //带有缓冲的channelfmt.Println("len(c) = ", len(c), ", cap(c)", cap(c))go func() {defer fmt.Println("子go程结束&q…

selenium 常用操作汇总

使用selenium1、查看Chrome版本去下载浏览器驱动 驱动下载链接2、selenium官方网站 官方文档 selenium通信原理对于每一条Selenium脚本,一个http请求会被创建并且发送给浏览器的驱动 浏览器驱动中包含了一个HTTP Server,用来接收这些http请求 HTTP Server接收到请求后根据请…

不想当Window的Dialog不是一个好Modal,弹窗翻身记

Windows的灵魂是什么?当然是Window,当方便快捷的多窗口进入人们视野的时候,大家无不为之惊呼太好用了!!弹窗是我们熟视无睹的一种交互方式,经常用到,但从没好好想过这种交互行为背后的意义... 弹窗是Windows的灵魂 Windows的灵魂是什么?当然是Window,当方便快捷的多窗…

工具 -- git 汉化

说明 来源转载 https://blog.csdn.net/mansir123/article/details/121692125Git GUI汉化包来源 https://github.com/stayor/git-gui-zh转载 https://www.cnblogs.com/chenghu/articles/12678500.html1、git bash 汉化 这个Git bash本身就支持中文,只需要在打开Git bash后命令窗…

好多不懂的和bug

1、知道了MD5, 2、知道了validate是干什么的,(validate中的rules中编写验证规则,规范输入),可以在管理员在网站修改数据的时候对输入进行限制。1 <script type="text/javascript">2 $(function(){3 $("#addForm").validate({4 rul…

DevTools 无法加载来源映射:无法加载 webpack net::ERR_UNKNOWN_URL_SCHEME

问题:DevTools 无法加载来源映射:无法加载 webpack:///node_modules/element-plus/es/components/notification/src/notification.mjs.map 的内容:Fetch through target failed: Unsupported URL scheme; Fallback: HTTP 错误:状态代码 404,net::ERR_UNKNOWN_URL_SCHEME 当…

JAVA进阶--static、工具类、单例、继承--2022年8月28日

第一节 static静态关键字1、成员变量的分类和访问分别是什么样的?静态成员变量(有static修饰,属于类,加载一次,可以被共享访问)访问格式:类名.变量名(推荐)对象名.变量名(不推荐)实例成员变量(无static修饰,属于对象)访问格式:对象名.变量名2、两种成员变量各自…

QA特辑 | 看了这场直播,我找到了设备指纹“从不说谎”的原因

除了身份证外,设备指纹可能是唯一一个可以证明你是谁的方法。 究其原因,就在于设备指纹的唯一性和稳定性。 8月 25 日下午 15 点,顶象技术总监杜威就设备指纹的唯一性和稳定性的核心算法展开分享。直播过程中,我们也收到了一系列关于设备指纹唯一性稳定性核心算法的疑问,现…

YBTOJ [树状数组] 二进制

哇咔咔,此乃真好题!这种东西当然要抢个榜首辣qaq。 Solution 首先不带 \(+x\) 的做法,相信大家都会,维护一下全局二进制每一位 \(1\) 的个数,把 \(y\) 二进制拆分一下,就知道答案了。 这个 \(+x\) 真滴很恶心啊! 考虑这样一个事实,非常滴实用: 对于一个 \(x\) \(and\)…

科普达人丨一图看懂安全组

建议收藏安全组是一种虚拟防火墙,通过安全组规则控制 ECS 实例出/入方向的流量,保障云服务器的安全。本文将通过介绍安全组的工作原理、功能、默认安全组和规则,以及快速上手使用安全组的操作等方面的介绍,您对于安全组有一个全面的了解,帮助您更好、更安全地开展业务上云…

京东云PostgreSQL在GIS场景的应用分享

在地图或地理信息有关的场景里,地址关键词的检索尤其重要。比如打开百度地图,想要查询某个位置的信息“北京市海淀区清华东路17号中国农业大学”,往往我们输入的是关键词“中国农业大学”而不是精确到街道的详细地址信息。在地图或地理信息有关的场景里,地址关键词的检索尤…

超全的正则表达式速查手册

一、校验数字的表达式 数字:^[0-9]*$ n位的数字:^\d{n}$ 至少n位的数字:^\d{n,}$ m-n位的数字:^\d{m,n}$ 零和非零开头的数字:^(0|[1-9][0-9]*)$ 非零开头的最多带两位小数的数字:^([1-9][0-9]*)+(.[0-9]{1,2})?$ 带1-2位小数的正数或负数:^(\-)?\d+(\.\d{1,2})?$ 正…

HCIA学习笔记二十六:手工负载分担模式二层链路聚合

一、链路聚合的应用场景• 链路聚合一般部署在核心结点,以便提升整个网络的数据吞吐量。 二、链路聚合• 链路聚合能够提高链路带宽,增强网络可用性,支持负载分担。 三、链路聚合模式• 手工负载分担模式下所有活动接口都参与数据的转发,分担负载流量。 • LACP模式支持链路…

Kotlin的空检查

我们在使用Java语言时,经常会出现空指针异常NullPointerException。Kotlin基于过往语言设计的经验对这一问题进行了改良,把运行时可能出现的null问题,以编译时错误的方式,提前在编译期强迫我们重视起来,而不是等到运行时报错,防患于未然,提高我们程序的健壮性。 Kotlin语…

智慧城市建设的三个阶段

今天的中国城市,正在疾步向前拥抱智慧时代,我国是全球智慧城市建设最为积极的国家之一。近年来,随着政策红利进一步释放与资金的大量投入,智慧城市产业也将迎来新的发展高潮。智慧城市建设步入快车道时代!据不完全统计,中国智慧城市的发展数量已经超过500个,居世界之最。…

2021年 西南石油大学超算与并行计算团队南充校区分队 第二届招新赛题解

2021年SWPU(南充)超算团队招新赛总体难度并不是很大,大部分题目考察的是基本的编程能力,题目中涉及到了一些并行计算相关的名词和知识,选手在参加比赛的同时,既能够展示自己的实力,也可以学习到相关的一些知识。下面是本次招新赛的题目A.简单输出 题目描述:题目要求:输出…

Java并发编程总结

——《Java多线程编程实战指南》学习及其他参考博客总结 串行、并行、并发 (1)串行:顺序执行多个任务,一个时刻只有一个任务在执行 (2)并行:多个CPU(核)同一时间多个任务,一个时刻有多个任务在执行 (3)并发:单个CPU(核)同一时间间隔内交替执行多个任务,一个时刻只有一…

学习随笔——洛谷题目P1636解答

摘要:欧拉图的应用。 题目原地址如下:https://www.luogu.com.cn/problem/P1636 题目截图如下: 一笔画问题,考察欧拉回路的定义,即所有节点的入度出度的和都为偶数即可满足欧拉回路的性质。我们为方便分析可加入一条线,发现加入一条边后会改变两个点的度数和,只需寻找奇数…

Spring的自动化装配

在Spring中,对象无需自己查找和创建与其所关联的其他对象。相反,容易负责把需要相互协作的对象引用赋予各个对象。例如,一个订单管理的组件需要信用卡认证组件,但它不需要自己创建信用卡认证组件。订单管理组件只需要表明自己两手空空,容器就会主动赋予它一个信用卡认证组…

jQuery使用ajax

1.导入jQuery的js库2.jQuery发送单一的get请求$.get(url:接口地址,data:{id:1,name:2,......}function(res){// res是服务器返回的数据} ) 3.jQuery发送单一的post请求$.post(url:接口地址,data:{id:1,name:哈哈哈,......}function(res){// res是服务器返回的数据} ) 4.jQuery发…