大家都能看得懂的原始碼 - 那些關于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 = https://www.cnblogs.com/gopal/archive/2022/08/29/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 = https://www.cnblogs.com/gopal/archive/2022/08/29/href;
    // 此屬性命名鏈接檔案與當前檔案的關系，
    link.rel ='shortcut icon';

    document.getElementsByTagName('head')[0].appendChild(link);
  }, [href]);
};

本文已收錄到個人博客中，歡迎關注~

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/503136.html

標籤：其他

上一篇：記錄--vue+three.js 構建簡易全景圖

下一篇：第二章、框架設計的核心要素