[JavaScript進階] 路由跳轉原理 之 Hash 模式

来源:https://www.cnblogs.com/Yiero/archive/2023/11/09/17818698.html
-Advertisement-
Play Games

路由跳轉原理 之 Hash 一. 路由跳轉的原理 首先講講路由跳轉的原理, 其實沒有什麼神秘的, 以變數類比: // 首先定義一個變數名為 container , 賦予初始值 'index' let container = 'index'; // 監聽一個點擊事件 window.addEventLi ...


路由跳轉原理 之 Hash

一. 路由跳轉的原理

首先講講路由跳轉的原理, 其實沒有什麼神秘的, 以變數類比:

// 首先定義一個變數名為 container , 賦予初始值 'index'
let container = 'index';

// 監聽一個點擊事件
window.addEventListener('click', (e) => {
  // 當點擊事件的觸發元素的 id 為 'index' 的時候
	if (e.target.id === 'index') {
    // 改變變數的值為 'index'
  	container = 'index';
  }
  // 當點擊事件的觸發元素的 id 為 'news' 的時候
  else if (e.target.id === 'news') {
		// 改變變數的值為 'news'
		container = 'news';
  }
});

在上文的代碼中, 在監聽到點擊事件的時候, 會改變變數的值. 那麼, 如果不再監聽點擊事件, 而是 監聽頁面路徑改變 ; container 也不是一個變數而是一個HTML元素, 當監聽回調觸發時, 修改的是這個 container 元素內部的HTML片段, 那麼其實就是路由跳轉了:

// 定義一套路由
const ComponentIndex = `<div>Index Page</div>`;
const ComponentNews = `<div>News Page</div>`;

// 獲取 `container` 容器
let container = document.querySelector('#container');
// 賦予 `container` 容器初始值
container.innerHTML = ComponentIndex;

// 監聽一個頁面跳轉事件 (不存在 pageURLChange 事件, 僅作為一個示例)
window.addEventListener('pageURLChange', (e) => {
  // 假設傳入的回調參數就是跳轉的頁面
  
  // 當跳轉的頁面是 'index' 時
	if (e === 'index') {
    // 將 container 容器的內部HTML片段修改為Index路由的內容
  	container.innerHTML = ComponentIndex;
  }
  // 當跳轉的頁面是 'news' 時
  else if (e === 'news') {
		// 將 container 容器的內部HTML片段修改為News路由的內容
		container.innerHTML = ComponentNews;
  }
});

二. Hash跳轉的實現原理

路由跳轉目前主要有兩種, hash 模式和 history 模式, 這其實是對應了 JavaScript 中兩種無刷新改變網頁URL的方式: location.hash 和 history.pushState . 本文主要講的就是第一種: Hash模式 .

Hash 模式和 History 模式原理都是一樣的, 不過是監聽頁面路徑跳轉的方式不同而已.

History模式等有空了會寫的...(咕

2.1 Hash是什麼

URL 路徑中可以存在 錨點 , 通過一個符號 # 表示. 當 URL 中存在錨點的時候, 錨點後面的字元串將不會被請求上伺服器, 僅作為本地瀏覽器數據訪問, 這個值被稱為 Hash 值.

比如, 下麵這兩串網址訪問百度伺服器的時候, 百度都只會接收到 https://www.baidu.com/ 這一串地址請求, Hash 值並不會通過網路請求發送給伺服器.

https://www.baidu.com
https://www.baidu.com#12345

關於錨點的概念, 其實在初學 HTML 的時候就接觸到了: 在學習錨元素 <a> 的時候其實就已經瞭解過了, 當時講的是 a 元素可以通過 #id 跳轉至頁面的某一個 id 的位置, 這本質上就是利用到了錨點.

參考文檔: [MDN - 文本片段]

2.2 改變 hash 的原理

通過 location.hash 屬性, 可以更改頁面的 Hash , 並且不會刷新頁面只改變 URL 路徑; 當 Hash 改變的時候, 會觸發一個 hashchange 事件, 以此我們就可以通過監聽 hashchange 事件事件去改變頁面的內容了.

同時, 當頁面 Hash 改變的時候, 也會向瀏覽器的訪問歷史添加一個記錄, 所以也可能通過 history.go() 去控制頁面訪問歷史.

因為這兩個API都比較簡單所以就不單獨列出來說明瞭, 可以自行參照文檔閱讀. 直接看下文代碼也是可以的, 都是一些很基礎的應用並且我會作出一定的說明.

參考文檔:

2.3 通過 hashchange 事件監聽頁面路徑改變

2.3.1 location.hash

當 URL 中沒有錨點的時候, 直接輸出會輸出空字元串:

/* URL: www.baidu.com */

console.log(location.hash);
// -> ''

當向沒有錨點的 URL 改變 hash 時, 會自動添加錨點:

輸入時不用添加錨點, 但是輸出時會輸出錨點(見下例).

/* URL: www.baidu.com */

location.hash = 'index';
/* URL: www.baidu.com#index */

console.log(location.hash);
// -> '#index'

通常為了讓路由跳轉後的 URL 更像一個地址, 我們會在 Hash 前添加一個斜杠 / :

/* URL: www.baidu.com */

location.hash = '/index';
/* URL: www.baidu.com#/index */

2.3.2 hashchange 事件

當頁面中的 Hash 發生改變的時候, 會觸發事件 hashchange , 在事件的回調參數 e 中有兩個可以利用到的屬性: e.newURL 和 e.oldURL . 見名思意, 分別是改變後的 URL 和改變前的 URL .

// 監聽 hash 改變事件
window.addEventListener('hashchange', (e) => {
  // 防止重覆跳轉
  if (e.newURL === e.oldURL) {
      return;
  }
  
  /*
   * 判斷完重覆跳轉的情況之後, 直接使用頁面的 `location.hash` 就可以了
   * e.newURL 是一個字元串, 獲取 hash 還需要額外處理
   * 之前說過輸出 hash 的時候會輸出錨點 所以通過 `.slice()` 方法將第一個錨點符號刪除.
   */
  console.log(location.hash.slice(1))
}

/* URL: www.baidu.com */

location.hash = '/index';
/* URL: www.baidu.com#/index */
// -> /index

其實這個回調參數是可以不使用的, 因為如果 e.newURL === e.oldURL , Hash 根本不會發生改變, hashchange 事件也不會觸發, 這裡僅僅只是作為一個 示例 .

2.4 通過 history.go() 控制頁面訪問歷史

每一次調用 location.hash 都會往瀏覽器中寫入一條歷史記錄, 理所應當 history.go() 也能控制 Hash 改變產生的歷史記錄:

/* URL: www.baidu.com */

location.hash = '/index';
/* URL: www.baidu.com#/index */

location.hash = '/news';
/* URL: www.baidu.com#/news */

history.go(-1);
/* URL: www.baidu.com#/index */

history.go(-1);
/* URL: www.baidu.com */

三. 實現一個 HashRouter 庫

在前文我們已經對 Hash 模式的路由跳轉進行了簡單的剖析, 現在可以試著做一個簡易的 Router 路由跳轉庫了.

3.1 規範

首先, 我們需要對一些格式進行一定的規範, 這樣我們就可以基於這些規範寫一個標準庫:

3.1.1 HTML 規範

對於 HTML , 我們使用 dataset 進行標記:

  • data-router-link-container: 表示一個路由跳轉容器.
    • data-router-link: 表示一個路由跳轉鏈接, 該屬性的值就是跳轉的路由地址.
  • data-router-view: 表示一個路由內容顯示容器, 路由跳轉後顯示的內容會在該元素內顯示.

3.1.2 JavaScript 規範

編寫一個 HashRouter 類, 構造函數的參數 options 的類型為:

options = {
	routes: Array<{
    path: string, 
    component: {
    	template: string,
    }
  }>
}
  • routes: 路由數組
    • path: 路由的路徑
    • component: 路由組件的內容
      • template: 路由組件的 HTML 片段

參考文檔:

3.2 編寫庫

這部分內容就簡單講了, 內容都在代碼塊中, 主要就是一個元素獲取以及 dataset 的值獲取.

下麵的方法都是類 HashRouter 中的方法:

3.2.1 跳轉路由

/**
 * 監聽路由跳轉容器點擊, 跳轉路由
 *  綁定一個具有 [data-router-link-container] 屬性的容器, 監聽這個容器內冒泡出來的 `click` 事件
 *  當 `click` 事件觸發時, 判斷觸發的元素是否有 `data-router-link` 屬性
 *  如果存在, 則改變當前頁面的 Hash 為 `data-router-link` 屬性的值
 */
bindRouterLinkEvent() {
    // 找到具有 [data-router-link-container] 屬性的容器
    document.querySelector('[data-router-link-container]')
        // 監聽容器內冒泡出來的 click 事件
        ?.addEventListener('click', (e) => {
            // 排除非 [data-router-link] 屬性的容器
            if (!e.target.dataset['routerLink']) {
                return;
            }

            // 阻止標簽跳轉
            e.preventDefault();

            // 更改頁面 Hash
            window.location.hash = `${e.target.dataset['routerLink']}`
        });
}

3.2.2 監聽路由跳轉

/**
 * 監聽 URL hash 的改變, 並且更新 [data-router-view] 容器內的 HTML 片段.
 */
listenHashChange() {
    window.addEventListener('hashchange', () => {
        // 尋找跳轉路徑
        const route = this.routes.find(
            route => route.path === window.location.hash.slice(1)
        );

        // 如果找不到跳轉路徑, 報錯
        if (!route) {
            console.error('找不到跳轉路徑');
            return;
        }

        // 改變 [data-router-view] 容器內的 HTML 片段
        const viewContainer = document.querySelector('[data-router-view]');
        if (viewContainer) {
            viewContainer.innerHTML = route.component.template;
        }
    })
}

3.2.3 瀏覽歷史操作

/**
 * 歷史記錄跳轉
 *
 * @param {number} step - 跳轉的步數
 *
 * @example HashRouter.go(1) 前進一步歷史
 * @example HashRouter.go(-1) 後退一步歷史
 */
go(step) {
    history.go(step);
}

/**
 * 歷史記錄跳轉 - 後退一步
 */
back(){
    this.go(-1);
}

/**
 * 歷史記錄跳轉 - 前進一步
 */
forward(){
    this.go(1);
}

3.3 HashRouter.js

/* HashRouter.js */
class HashRouter {
    /**
     * @constructor
     * @param {{routes: [{path: string, component: {template: string}}]}} options
     * */
    constructor(options) {
        this.routes = options.routes;
        this.bindRouterLinkEvent();
        this.listenHashChange();
    }

    /**
     * 匹配路由
     *  綁定一個具有 [data-router-link-container] 屬性的容器, 監聽這個容器內冒泡出來的 `click` 事件
     *  當 `click` 事件觸發時, 判斷觸發的元素是否有 `data-router-link` 屬性
     *  如果存在, 則改變當前頁面的 Hash 為 `data-router-link` 屬性的值
     */
    bindRouterLinkEvent() {
        // 找到具有 [data-router-link-container] 屬性的容器
        document.querySelector('[data-router-link-container]')
            // 監聽容器內冒泡出來的 click 事件
            ?.addEventListener('click', (e) => {
                // 排除非 [data-router-link] 屬性的容器
                if (!e.target.dataset['routerLink']) {
                    return;
                }

                // 阻止標簽跳轉
                e.preventDefault();

                // 更改頁面 Hash
                window.location.hash = `${e.target.dataset['routerLink']}`
            });
    }

    /**
     * 監聽 URL hash 的改變, 並且更新 [data-router-view] 容器內的 HTML 片段.
     */
    listenHashChange() {
        window.addEventListener('hashchange', () => {
            // 尋找跳轉路徑
            const route = this.routes.find(
                route => route.path === window.location.hash.slice(1)
            );

            // 如果找不到跳轉路徑, 報錯
            if (!route) {
                console.error('找不到跳轉路徑');
                return;
            }

            // 改變 [data-router-view] 容器內的 HTML 片段
            const viewContainer = document.querySelector('[data-router-view]');
            if (viewContainer) {
                viewContainer.innerHTML = route.component.template;
            }
        })
    }

    /**
     * 歷史記錄跳轉
     *
     * @param {number} step - 跳轉的步數
     *
     * @example HashRouter.go(1) 前進一步歷史
     * @example HashRouter.go(-1) 後退一步歷史
     */
    go(step) {
        history.go(step);
    }

    /**
     * 歷史記錄跳轉 - 後退一步
     */
    back(){
        this.go(-1);
    }

    /**
     * 歷史記錄跳轉 - 前進一步
     */
    forward(){
        this.go(1);
    }
}

export default HashRouter;

3.4 示例

目錄結構:

| HashRouter.js

| index.html

<!-- index.html -->
<nav class="route-nav" data-router-link-container>
    <a class="toPageIndex" data-router-link="/index">Index</a>
    <a class="toPageNews" data-router-link="/news">News</a>
</nav>
<hr>
<div data-router-view></div>
<script type="module">
  	// 引入 HashRouter.js
    import HashRouter from './HashRouter.js';

    // 聲明路由模板
    const IndexPage = {
        template: '<div>IndexPage</div>'
    }
    const NewsPage = {
        template: '<div>NewsPage</div>'
    }

    // 註冊路由
    new HashRouter({
        routes: [
            {
                path: '/',
                component: IndexPage
            },
            {
                path: '/index',
                component: IndexPage
            },
            {
                path: '/news',
                component: NewsPage
            }
        ]

    })
</script>

3.5 一些問題

HashRouter.js 存在的一些問題, 提供思考, 感興趣的也可以想一想如何改造 HashRouter.js 使其功能更加強大:

  • 無法傳參
  • 無法實現子路由
  • 無法通過函數跳轉路由
  • ...

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

-Advertisement-
Play Games
更多相關文章
  • 自定義xunit測試用例的執行順序
    有的時候我們會對程式進行單元測試, 為了測試的效果以及後期的維護, 我一般會將各個測試拆開, 根據需要測試的類分到各個類型中, 不過在實際操作的時候就出現了一些意想不到的問題, 各個測試的執行是亂序的, 按照我自己寫測試的習慣, 假如我需要測試新寫的增刪改查的功能, 我會將增刪改查分開測試, 會按照 ...
  • 一個基於.NET7的開源DNS服務 DnsServer 的部署使用經驗分享
    接上篇 docker-bind 的使用搭建了一個 dns 服務，本篇將介紹另外一款 DnsServer 的部署和使用，更專註，更輕量。 ...
  • MongoDB+SignalR+Hangfire+Vue2+百度地圖實現GPS實時定位
    MongoDB+SignalR+Hangfire+Vue2+百度地圖實現GPS實時定位 一、實現效果 二、安裝MongoDB 可以自行參考菜鳥鏈接:MongoDB 教程 | 菜鳥教程 (runoob.com) 1.下載mongodb資料庫安裝包： 網盤鏈接:https://pan.baidu.com ...
  • Redis系列之常見數據類型應用場景
    目錄String簡單介紹常見命令應用場景Hash簡單介紹常見命令應用場景List簡單介紹常見命令應用場景Set簡單介紹常見命令應用場景Sorted Set(Zset)簡單介紹常見命令應用場景Bitmap簡單介紹常見命令應用場景附錄 Redis支持多種數據類型，比如String、hash、list、S ...
  • clickhouse節點重做（節點替換）
    在構建數據倉庫或做數據分析時，需要對原始數據的結構進行一定的處理，有時涉及到“行轉列”，有時涉及到“列轉行”，那麼這兩個轉換的方式具體是什麼，有什麼差異，怎麼實現。 ...
  • 有效降低資料庫存儲成本方案與實踐
    本文主要以介紹方法為主，落地過程可以歸納為方案->收益測算->數據安全驗證->系統穩定性驗證->灰度與回滾。文中的賬單系統通過step1大表壓縮32%，step2大JSON欄位序列化12%，step3刪除無效數據10%，3個方案的順利落地，有效的減少了50.7%的磁碟空間，成本下降也非常顯著。最後，... ...
  • 數倉實踐丨表掃描時過濾行數過多引起的性能瓶頸問題
    本文分享自華為雲社區《GaussDB(DWS)性能調優：表掃描時過濾行數過多引起的性能瓶頸問題案例》，作者： O泡果奶~ 。 1、【問題描述】 SQL語句執行過程中，對12億數據量的大表進行掃描，過濾99%的數據僅留617行數據，性能瓶頸位於掃描該表這裡。 2、【原始語句】 set search_p ...
  • 【慢SQL性能優化】 一條SQL的生命周期
    本文采用一張簡單的架構圖說明瞭MySQL查詢中使用的組件和組件間關係。解析了一條sql語句從客戶端請求mysql伺服器到返回給客戶端的整個生命周期流程。 ...
一周排行
    -Advertisement-
    Play Games
  • WPF 已知問題 監聽 WMI 事件導致觸摸失效
    示例項目結構 在 Visual Studio 中創建一個 WinForms 應用程式後，項目結構如下所示： MyWinFormsApp/ │ ├───Properties/ │ └───Settings.settings │ ├───bin/ │ ├───Debug/ │ └───Release/ ...
  • [STAThread]特性
    [STAThread] 特性用於需要與 COM 組件交互的應用程式，尤其是依賴單線程模型（如 Windows Forms 應用程式）的組件。在 STA 模式下，線程擁有自己的消息迴圈，這對於處理用戶界面和某些 COM 組件是必要的。 [STAThread] static void Main(stri ...
  • UWP WinUI3 傳入 AddHandler 的 RoutedEventHandler 類型與事件所需不匹配將拋出參數異常
    在WinForm中使用全局異常捕獲處理 在WinForm應用程式中，全局異常捕獲是確保程式穩定性的關鍵。通過在Program類的Main方法中設置全局異常處理，可以有效地捕獲並處理未預見的異常，從而避免程式崩潰。 註冊全局異常事件 [STAThread] static void Main() { / ...
  • .NET 多版本 WinForm 開源控制項庫 SunnyUI
    前言 給大家推薦一款開源的 Winform 控制項庫，可以幫助我們開發更加美觀、漂亮的 WinForm 界面。 項目介紹 SunnyUI.NET 是一個基於 .NET Framework 4.0+、.NET 6、.NET 7 和 .NET 8 的 WinForm 開源控制項庫，同時也提供了工具類庫、擴展 ...
  • .net core8 使用Swagger（附當前源碼）
    說明 該文章是屬於OverallAuth2.0系列文章，每周更新一篇該系列文章（從0到1完成系統開發）。 該系統文章，我會儘量說的非常詳細，做到不管新手、老手都能看懂。 說明：OverallAuth2.0 是一個簡單、易懂、功能強大的許可權+可視化流程管理系統。 有興趣的朋友，請關註我吧(*^▽^*) ...
  • WPF 什麼時候 VisualTreeHelper.GetDescendantBounds 將返回無窮大
    一、下載安裝 1.下載git 必須先下載並安裝git，再TortoiseGit下載安裝 git安裝參考教程：https://blog.csdn.net/mukes/article/details/115693833 2.TortoiseGit下載與安裝 TortoiseGit，Git客戶端，32/6 ...
  • C# 開源教程帶你輕鬆掌握數據結構與演算法
    前言 在項目開發過程中，理解數據結構和演算法如同掌握蓋房子的秘訣。演算法不僅能幫助我們編寫高效、優質的代碼，還能解決項目中遇到的各種難題。 給大家推薦一個支持C#的開源免費、新手友好的數據結構與演算法入門教程：Hello演算法。 項目介紹 《Hello Algo》是一本開源免費、新手友好的數據結構與演算法入門 ...
  • 第22篇 生成proto文件bat腳本
    1.生成單個Proto.bat內容 @rem Copyright 2016, Google Inc. @rem All rights reserved. @rem @rem Redistribution and use in source and binary forms, with or with ...
  • 記一次 .NET某上位機視覺程式 卡死分析
    一：背景 1. 講故事 前段時間有位朋友找到我，說他的窗體程式在客戶這邊出現了卡死，讓我幫忙看下怎麼回事？dump也生成了，既然有dump了那就上 windbg 分析吧。 二：WinDbg 分析 1. 為什麼會卡死 窗體程式的卡死，入口門檻很低，後續往下分析就不一定了，不管怎麼說先用 !clrsta ...
  • 醫學DICOM文件與PACS系統進行數據傳輸
    前言 人工智慧時代，人臉識別技術已成為安全驗證、身份識別和用戶交互的關鍵工具。 給大家推薦一款.NET 開源提供了強大的人臉識別 API，工具不僅易於集成，還具備高效處理能力。 本文將介紹一款如何利用這些API，為我們的項目添加智能識別的亮點。 項目介紹 GitHub 上擁有 1.2k 星標的 C# ...
所有分類