大家都能看得懂的源碼 - 那些關於DOM的常見Hook封裝(二)

来源:https://www.cnblogs.com/gopal/archive/2022/08/30/16638912.html
-Advertisement-
Play Games

本文是深入淺出 ahooks 源碼系列文章的第十五篇,該系列已整理成文檔-地址。覺得還不錯,給個 star 支持一下哈,Thanks。 本篇接著針對關於 DOM 的各個 Hook 封裝進行解讀。 useFullscreen 管理 DOM 全屏的 Hook。 該 hook 主要是依賴 screenfu ...


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

本文已收錄到個人博客中,歡迎關註~


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 對於想買車的用戶來說,如果走在路上刷社交軟體時突然在App里收到一條廣告:“前方500米商圈裡的某品牌汽車正在做優惠,力度大福利多。”不管買不買,八成都會去看看,原因有三:距離近、需求匹配、有優惠。那麼這就是一條成功的投放廣告,廣告最重要的就是尋找關鍵的客戶目標群,所以各App的營銷人員都在思考如何 ...
  • 1. 丐版 HelloWebGPU 最簡單的 WebGPU 程式應該是這樣的: <script> const init = () => { if ('gpu' in navigator) { console.log(navigator.gpu) } else { console.log('瀏覽器不支 ...
  • 8 JSON 因平時工作時,使用JSON的場景比較多,其JSON語法不再介紹,僅介紹在JavaScript中JSON的解析和序列化。 8.1 JSON 對象 JSON對象有兩個方法: stringify():將JavaScript序列化為JSON字元串 parse():將JSON解析為原生JavaS ...
  • 在B/S系統開發中,前後端分離開發設計已成為一種標準,而VUE作為前端三大主流框架之一,越來越受到大家的青睞,Antdv是Antd在Vue中的實現。本系列文章主要通過Antdv和Asp.net WebApi開發學生信息管理系統,簡述前後端分離開發的主要相關內容,僅供學習分享使用,如有不足之處,還請指... ...
  • 閑聊: 小穎今年四月底從西安跑到深圳來找工作,本來想著好好賺錢還房貸,結果快轉正了被通知要麼無薪待崗,要麼辦理離職,嗯~ o(* ̄▽ ̄*)o.............................. 想罵人咋辦 ? 小穎之前沒怎麼寫過小程式,到這邊後接手了離職小姐姐的工作,看代碼、看api、自己試 ...
  • 這裡給大家分享我在網上總結出來的一些知識,希望對大家有所幫助 File() File() 構造器創建新的 File 對象實例。 語法 var myFile = new File(bits, name[, options]); 參數 bits 一個包含ArrayBuffer,ArrayBufferVi ...
  • 原文鏈接:https://dev.to/ruppysuppy/7-tips-for-clean-react-typescript-code-you-must-know-2da2 “乾凈的代碼”不僅是可以正常運行的代碼。它指的是組織整齊、易於閱讀、易於理解且易於維護的代碼。 讓我們來看看 React ...
  • 進入/離開 & 列表過渡 點擊打開視頻講解更加詳細 概述 Vue 在插入、更新或者移除 DOM 時,提供多種不同方式的應用過渡效果。包括以下工具: 在 CSS 過渡和動畫中自動應用 class 可以配合使用第三方 CSS 動畫庫,如 Animate.css 在過渡鉤子函數中使用 JavaScript ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...