【解读 ahooks 源码系列】DOM篇（二）

Dear 丶 2023-09-25 00:25 63阅读 0赞

### 前言 ###

本文是 ahooks 源码系列的第二篇，往期文章

[https://mp.csdn.net/mp\_blog/creation/editor/129581436][https_mp.csdn.net_mp_blog_creation_editor_129581436]

*  本文主要解读 `useEventTarget`、`useExternal`、`useTitle`、`useFavicon`、`useFullscreen`、`useHover` 源码实现

### useEventTarget ###

常见表单控件(通过 e.target.value 获取表单值) 的 onChange 跟 value 逻辑封装，支持自定义值转换和重置功能。

[官方文档][Link 1]

export interface Options<T, U> {
      initialValue?: T; // 初始值
      transformer?: (value: U) => T; // 自定义回调值的转化
    }
    复制代码

#### 基本用法 ####

![format_png][]

import React from 'react';
    import { useEventTarget } from 'ahooks';
    
    export default () => {
      const [value, { reset, onChange }] = useEventTarget({ initialValue: 'this is initial value' });
    
      return (
        <div>
          <input value={value} onChange={onChange} style={
      
       { width: 200, marginRight: 20 }} />
          <button type="button" onClick={reset}>
            reset
          </button>
        </div>
      );
    };
    复制代码

#### 使用场景 ####

适用于较为简单的表单受控控件（如 input 输入框）管理

#### 实现思路 ####

1.  监听表单的 onChange 事件，拿到值后更新 value 值
2.  支持自定义回调值的转化，对外暴露 value 值、onChange 和 reset 方法

#### 核心实现 ####

这个实现比较简单，这里结尾代码有个`as const`，它表示强制 TypeScript 将变量或表达式的类型视为不可变的

具体可以看下这篇文章： [杀手级的 TypeScript 功能：const 断言][TypeScript _const]

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>) => {
        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; // 将数组变为只读元组，可以确保其内容不会在其声明和函数调用之间发生变化
    }
    复制代码

[完整源码][Link 2]

### useExternal ###

动态注入 JS 或 CSS 资源，useExternal 可以保证资源全局唯一。

[官方文档][Link 3]

#### 基本用法 ####

import React from 'react';
    import { useExternal } from 'ahooks';
    
    export default () => {
      const status = useExternal('/useExternal/test-external-script.js', {
        js: {
          async: true,
        },
      });
    
      return (
        <>
          <p>
            Status: <b>{status}</b>
          </p>
          <p>
            Response: <i>{status === 'ready' ? window.TEST_SCRIPT?.start() : '-'}</i>
          </p>
        </>
      );
    };
    复制代码

#### 实现思路 ####

原理：通过 script 标签加载 JS 资源 / 创建 link 标签加载 CSS 资源，再通过创建标签返回的 Element 元素监听 load 和 error 事件 获取加载状态

1.  正则判断传入的路径 path 是 JS 还是 CSS
2.  加载 CSS/JS：创建 link/script 标签传入 path，支持传入 link/script 标签支持的属性，添加到 head/body 中，并返回 Element 元素与加载状态；这里需判断标签路径匹配是否存在，存在则返回上一次结果，以保证资源全局唯一
3.  利用创建标签返回的 Element 元素监

[https_mp.csdn.net_mp_blog_creation_editor_129581436]: https://mp.csdn.net/mp_blog/creation/editor/129581436
[Link 1]: https://link.juejin.cn?target=https%3A%2F%2Fahooks.js.org%2Fzh-CN%2Fhooks%2Fuse-event-target
[format_png]: https://img-blog.csdnimg.cn/img_convert/102bc0431c5f11bad8ef87fee7435ef6.webp?x-oss-process=image/format,png
[TypeScript _const]: https://juejin.cn/post/6844903848939634696
[Link 2]: https://link.juejin.cn?target=https%3A%2F%2Fgithub.com%2Falibaba%2Fhooks%2Fblob%2Fv3.7.4%2Fpackages%2Fhooks%2Fsrc%2FuseEventTarget%2Findex.ts
[Link 3]: https://link.juejin.cn?target=https%3A%2F%2Fahooks.js.org%2Fzh-CN%2Fhooks%2Fuse-external