大家都能看得懂的原始碼

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

本文已收錄到個人部落格中，歡迎關注~