大家都能看得懂的源码 - 那些关于DOM的常见Hook封装(一)
本文是深入浅出 ahooks 源码系列文章的第十四篇,该系列已整理成文档-地址。觉得还不错,给个 star 支持一下哈,Thanks。
上一篇我们探讨了 ahooks 对 DOM 类 Hooks 使用规范,以及源码中是如何去做处理的。接下来我们就针对关于 DOM 的各个 Hook 封装进行解读。
useEventListener
优雅的使用 addEventListener。
我们先来看看 addEventListener 的定义,以下来自 MDN 文档:
EventTarget.addEventListener() 方法将指定的监听器注册到 EventTarget 上,当该对象触发指定的事件时,指定的回调函数就会被执行。
这里的 EventTarget 可以是一个文档上的元素 Element,Document和Window 或者任何其他支持事件的对象 (比如 XMLHttpRequest)。
我们看 useEventListener 函数 TypeScript 定义,通过类型重载,它对 Element、Document、Window 等元素以及其事件名称和回调参数都做了定义。
function useEventListener<K extends keyof HTMLElementEventMap>(
eventName: K,
handler: (ev: HTMLElementEventMap[K]) => void,
options?: Options<HTMLElement>,
): void;
function useEventListener<K extends keyof ElementEventMap>(
eventName: K,
handler: (ev: ElementEventMap[K]) => void,
options?: Options<Element>,
): void;
function useEventListener<K extends keyof DocumentEventMap>(
eventName: K,
handler: (ev: DocumentEventMap[K]) => void,
options?: Options<Document>,
): void;
function useEventListener<K extends keyof WindowEventMap>(
eventName: K,
handler: (ev: WindowEventMap[K]) => void,
options?: Options<Window>,
): void;
function useEventListener(eventName: string, handler: noop, options: Options): void;
内部代码比较简单:
- 判断是否支持 addEventListener,支持则将参数进行传递。可以留意注释中的几个参数的作用,当做复习,这里不展开细说。
- useEffect 的返回逻辑,也就是组件卸载的时候,会自动清除事件监听器,避免产生内存泄露。
function useEventListener(
// 事件名称
eventName: string,
// 处理函数
handler: noop,
// 设置
options: Options = {},
) {
const handlerRef = useLatest(handler);
useEffectWithTarget(
() => {
const targetElement = getTargetElement(options.target, window);
if (!targetElement?.addEventListener) {
return;
}
const eventListener = (event: Event) => {
return handlerRef.current(event);
};
// 监听事件
targetElement.addEventListener(eventName, eventListener, {
// listener 会在该类型的事件捕获阶段传播到该 EventTarget 时触发。
capture: options.capture,
// listener 在添加之后最多只调用一次。如果是 true,listener 会在其被调用之后自动移除。
once: options.once,
// 设置为 true 时,表示 listener 永远不会调用 preventDefault() 。如果 listener 仍然调用了这个函数,客户端将会忽略它并抛出一个控制台警告
passive: options.passive,
});
// 移除事件
return () => {
targetElement.removeEventListener(eventName, eventListener, {
capture: options.capture,
});
};
},
[eventName, options.capture, options.once, options.passive],
options.target,
);
}
useClickAway
监听目标元素外的点击事件。
提到这个的应用场景,应该是模态框,点击外部阴影部分,自动关闭的场景。那这里它是怎么实现的呢?
首先它支持传递 DOM 节点或者 Ref,并且是支持数组方式。
事件默认是支持 click,开发者可以自行传递并支持数组方式。
export default function useClickAway<T extends Event = Event>(
// 触发函数
onClickAway: (event: T) => void,
// DOM 节点或者 Ref,支持数组
target: BasicTarget | BasicTarget[],
// 指定需要监听的事件,支持数组
eventName: string | string[] = 'click',
) {
}
然后内部通过 document.addEventListener 监听事件。组件卸载的时候清除事件监听。
// 事件列表
const eventNames = Array.isArray(eventName) ? eventName : [eventName];
// document.addEventListener 监听事件,通过事件代理的方式知道目标节点
eventNames.forEach((event) => document.addEventListener(event, handler));
return () => {
eventNames.forEach((event) => document.removeEventListener(event, handler));
};
最后看 handler 函数,通过 event.target 获取到触发事件的对象 (某个 DOM 元素) 的引用,判断假如不在传入的 target 列表中,则触发定义好的 onClickAway 函数。
const handler = (event: any) => {
const targets = Array.isArray(target) ? target : [target];
if (
// 判断点击的 DOM Target 是否在定义的 DOM 元素(列表)中
targets.some((item) => {
const targetElement = getTargetElement(item);
return !targetElement || targetElement.contains(event.target);
})
) {
return;
}
// 触发点击事件
onClickAwayRef.current(event);
};
小结一下,useClickAway 就是使用了事件代理的方式,通过 document 监听事件,判断触发事件的 DOM 元素是否在 target 列表中,从而决定是否要触发定义好的函数。
useEventTarget
常见表单控件(通过 e.target.value 获取表单值) 的 onChange 跟 value 逻辑封装,支持自定义值转换和重置功能。
直接看代码,比较简单,其实就是监听表单的 onChange 事件,拿到值后更新 value 值,更新的逻辑支持自定义。
function useEventTarget<T, U = T>(options?: Options<T, U>) {
const { initialValue, transformer } = options || {};
const [value, setValue] = useState(initialValue);
// 自定义转换函数
const transformerRef = useLatest(transformer);
const reset = useCallback(() => setValue(initialValue), []);
const onChange = useCallback((e: EventTarget<U>) => {
// 获取 e.target.value 的值,并进行设置
const _value = e.target.value;
if (isFunction(transformerRef.current)) {
return setValue(transformerRef.current(_value));
}
// no transformer => U and T should be the same
return setValue(_value as unknown as T);
}, []);
return [
value,
{
onChange,
reset,
},
] as const;
}
useTitle
用于设置页面标题。
这个页面标题指的是浏览器 Tab 中展示的。通过 document.title 设置。
代码非常简单,一看就会:
function useTitle(title: string, options: Options = DEFAULT_OPTIONS) {
const titleRef = useRef(isBrowser ? document.title : '');
useEffect(() => {
document.title = title;
}, [title]);
useUnmount(() => {
// 组件卸载后,恢复上一次的 title
if (options.restoreOnUnmount) {
document.title = titleRef.current;
}
});
}
useFavicon
设置页面的 favicon。
favicon 指的是页面 Tab 的这个 ICON。
原理是通过 link 标签设置 favicon。
const useFavicon = (href: string) => {
useEffect(() => {
if (!href) return;
const cutUrl = href.split('.');
const imgSuffix = cutUrl[cutUrl.length - 1].toLocaleUpperCase() as ImgTypes;
const link: HTMLLinkElement =
document.querySelector("link[rel*='icon']") || document.createElement('link');
// 用于定义链接的内容的类型。
link.type = ImgTypeMap[imgSuffix];
// 指定被链接资源的URL。
link.href = href;
// 此属性命名链接文档与当前文档的关系。
link.rel = 'shortcut icon';
document.getElementsByTagName('head')[0].appendChild(link);
}, [href]);
};
本文已收录到个人博客中,欢迎关注~
大家都能看得懂的源码 - 那些关于DOM的常见Hook封装(一)的更多相关文章
- 大家都能看得懂的源码 - 那些关于DOM的常见Hook封装(二)
本文是深入浅出 ahooks 源码系列文章的第十五篇,该系列已整理成文档-地址.觉得还不错,给个 star 支持一下哈,Thanks. 本篇接着针对关于 DOM 的各个 Hook 封装进行解读. us ...
- 大家都能看得懂的源码 - ahooks useSet 和 useMap
本文是深入浅出 ahooks 源码系列文章的第十篇,该系列已整理成文档-地址.觉得还不错,给个 star 支持一下哈,Thanks. 今天我们来聊聊 ahooks 中对 Map 和 Set 类型进行状 ...
- 大家都能看得懂的源码(一)ahooks 整体架构篇
本文是深入浅出 ahooks 源码系列文章的第一篇,该系列已整理成文档-地址.觉得还不错,给个 star 支持一下哈,Thanks. 第一篇主要介绍 ahooks 的背景以及整体架构. React h ...
- 大家都能看得懂的源码 - 如何封装 cookie/localStorage/sessionStorage hook?
本文是深入浅出 ahooks 源码系列文章的第九篇,该系列已整理成文档-地址.觉得还不错,给个 star 支持一下哈,Thanks. 今天来看看 ahooks 是怎么封装 cookie/localSt ...
- 大家都能看得懂的源码 - ahooks 是怎么处理 DOM 的?
本文是深入浅出 ahooks 源码系列文章的第十三篇,该系列已整理成文档-地址.觉得还不错,给个 star 支持一下哈,Thanks. 本篇文章探讨一下 ahooks 对 DOM 类 Hooks 使用 ...
- 大家都能看得懂的源码之ahooks useInfiniteScroll
本文是深入浅出 ahooks 源码系列文章的第十七篇,该系列已整理成文档-地址.觉得还不错,给个 star 支持一下哈,Thanks. 简介 useInfiniteScroll 封装了常见的无限滚动逻 ...
- 大家都能看得懂的源码之 ahooks useVirtualList 封装虚拟滚动列表
本文是深入浅出 ahooks 源码系列文章的第十八篇,该系列已整理成文档-地址.觉得还不错,给个 star 支持一下哈,Thanks. 简介 提供虚拟化列表能力的 Hook,用于解决展示海量数据渲染时 ...
- 如何读懂Framework源码?如何从应用深入到Framework?
如何读懂Framework源码? 首先,我也是一个应用层开发者,我想大部分有"如何读懂Framework源码?"这个疑问的,应该大都是应用层开发. 那对于我们来讲,读源码最大的问题 ...
- Vue源码探究-虚拟DOM的渲染
Vue源码探究-虚拟DOM的渲染 在虚拟节点的实现一篇中,除了知道了 VNode 类的实现之外,还简要地整理了一下DOM渲染的路径.在这一篇中,主要来分析一下两条路径的具体实现代码. 按照创建 Vue ...
随机推荐
- 入坑KeePass(三)安全设置完后后留存
1.文件> 数据库设置 > 安全 迭代次数改成500000 2.工具 > 选项 2.1.安全 2.2.策略 2.3.集成 2.4高级
- vue大型电商项目尚品汇(后台篇)day04
昨天太晚就没来得及更新,今天是spu管理界面,这个界面一共有三个界面需要切换,完成了两个界面,而且今天的难度在于最后两个章节,富有一定的逻辑性,当然中间也有很多需要注意的,比如ElementUI的照片 ...
- python基础知识-day7(文件操作)
1.文件IO操作: 1)操作文件使用的函数是open() 2)操作文件的模式: a.r:读取文件 b.w:往文件里边写内容(先删除文件里边已有的内容) c.a:是追加(在文件基础上写入新的内容) d. ...
- JDBC:获取自增长键值的序号
1.改变的地方 实践: package com.dgd.test; import java.io.FileInputStream; import java.io.FileNotFoundExcept ...
- 绝对路径-相对路径和File类的构造方法
绝对路径和相对路径 绝对路径:是一个完整的路径,以盘符开始(c: d:)c:\a.txt 相对路径:相对指的是相对于当前项目的根目录(可以省略项目的根目录) 注意: 1.路径不区分大小写 2.路径中的 ...
- Object类和toString方法 --和Object类的equals方法
一,Object类概述:Object是类层次结构的根,每个类都可以将Object作为超类,所有类都直接或者间接的继承自该类构造方法:pulic Object()在面向对象中,子类要访问父类的无参构造方 ...
- 研发效能|Kubernetes核心技术剖析和DevOps落地经验
本文主要介绍Kubernetes 的核心组件.架构.服务编排,以及在集群规模.网络&隔离.SideCar.高可用上的一些使用建议,尤其是在CICD中落地,什么是 GitOps. 通过此文可彻底 ...
- springboot中实现权限认证的两个框架
web开发安全框架 提供认证和授权功能! 一.SpringSecurity 1.导入依赖 <dependency> <groupId>org.springframework.b ...
- 用户数据交互 Scanner
# 用户交互 Scanner ``` java package study5ran2yl.study; import java.util.Scanner; public class demo09 { ...
- 共享手机中的VXN流量给其他设备使用
此篇博文讲的什么 不想看废话的,直接看这里就行了: 手机端(IOS,已越狱)装的传统的VXN,没法直接共享流量给其他设备用,可以在手机端开放个socketsserver,我现在用的ssh,它也能提供这 ...