前端路由手写Hash和History两种模式

文章目录

        • [1. Hash模式:简洁而广泛适用](#1. Hash模式:简洁而广泛适用)
        • [2. History模式:更自然的用户体验](#2. History模式:更自然的用户体验)
        • [3. 结论](#3. 结论)

在现代Web开发中,单页面应用(Single Page Application,简称SPA)因其流畅的用户体验和高效的页面交互能力而备受青睐。前端路由作为SPA的核心技术之一,允许用户在不刷新整个页面的情况下,通过URL的变化来加载和切换不同的页面内容。本文将通过手写代码的方式,深入探讨前端路由的两种主流实现方式:Hash模式和History模式。

1. Hash模式:简洁而广泛适用

Hash模式利用URL的哈希(#之后的部分)来存储路由信息,由于哈希的变化不会触发完整的页面刷新,因此非常适合于实现SPA的前端路由。下面是一个使用Hash模式的手写路由实现示例:

html 复制代码
<!-- HTML结构 -->
<nav id="nav">
    <ul>
        <li><a href="#/page1">Page 1</a></li>
        <li><a href="#/page2">Page 2</a></li>
    </ul>
</nav>
<div id="content"></div>
javascript 复制代码
class HashRouter {
    constructor() {
        this.routes = {};
        window.addEventListener('hashchange', this.load.bind(this), false);
        this.load();
    }
    
    register(path, callback) {
        this.routes[path] = callback;
    }
    
    load() {
        let hash = window.location.hash.slice(1);
        let handler = this.routes[hash] || (() => {});
        handler.call(this);
    }
}

let router = new HashRouter();
router.register('/page1', () => document.getElementById('content').innerHTML = 'Page 1 Content');
router.register('/page2', () => document.getElementById('content').innerHTML = 'Page 2 Content');

在这个示例中,我们监听hashchange事件,每当URL的哈希部分发生变化时,都会触发load方法,根据当前的哈希值加载相应的内容。Hash模式的一个主要优点是它的广泛兼容性,几乎所有的浏览器都支持哈希的变化。

这里有一个细节就是使用bind来"绑定"this

当你在事件监听器中直接使用this.load,在事件触发时,this的值会根据调用上下文来决定,通常在这种情况下,this会指向事件发生的元素(比如window对象,因为在hashchange事件中,this通常指的是window)。这可能会导致你的load方法无法访问到HashRouterHistoryRouter实例的属性和方法,因为this不再指向你期望的实例。

为了避免这个问题,使用bind方法来"绑定"this值,确保无论load方法在哪里被调用,其内部的this都会指向HashRouterHistoryRouter的实例。这样,load方法就能正确访问和操作实例上的属性和方法,如this.routesthis.load方法自身。

简而言之,使用this.load.bind(this)是为了确保load方法的this上下文正确无误,使其能够访问到所在类实例的成员,从而正确执行路由逻辑。如果不使用bindthis可能会指向错误的对象,导致方法无法按预期工作。

2. History模式:更自然的用户体验

History模式利用HTML5的History API(包括pushState, replaceStatepopstate事件)来管理浏览器的历史记录。相比于Hash模式,History模式能够提供更加自然的URL结构,没有显眼的#符号,使URL看起来更像是传统的多页面应用。说多了就是少个#让人觉得更好看一点

html 复制代码
<!-- HTML结构 -->
<nav id="nav">
    <ul>
        <li><a href="/page1">Page 1</a></li>
        <li><a href="/page2">Page 2</a></li>
    </ul>
</nav>
<div id="content"></div>
javascript 复制代码
class HistoryRouter {
    constructor() {
        this.routes = {};
        window.addEventListener('popstate', this.load.bind(this), false);
        this.load();
    }
    
    register(path, callback) {
        this.routes[path] = callback;
    }
    
    load() {
        let path = window.location.pathname;
        let handler = this.routes[path] || (() => {});
        handler.call(this);
    }
    
    navigate(path) {
        history.pushState({}, '', path);
        this.load();
    }
}

let router = new HistoryRouter();
router.register('/page1', () => document.getElementById('content').innerHTML = 'Page 1 Content');
router.register('/page2', () => document.getElementById('content').innerHTML = 'Page 2 Content');

document.querySelectorAll('#nav a').forEach(link => {
    link.addEventListener('click', (e) => {
        e.preventDefault();
        router.navigate(e.target.href);
    });
});

在History模式下,我们通过监听popstate事件来捕获URL的变化,并通过pushState方法来改变当前的URL,同时保持页面不刷新。这里这种history方法可能会受到file://协议的限制,导致pushState代码运行不了。最推荐的方法是在本地搭建一个HTTP服务器来运行你的项目,而不是直接打开.html文件。这样可以绕过file://协议的限制。如果你使用的是vs code的呢,就右键文件通过open with live server方法打开,这个功能允许你快速启动一个轻量级的HTTP服务器,用于预览和测试你的HTML、CSS和JavaScript代码,而无需手动配置服务器环境。

3. 结论

无论是Hash模式还是History模式,每种方法都有其独特的优缺点。Hash模式易于实现且兼容性好,而History模式则提供更美观的URL和更自然的浏览体验。在实际项目中,根据应用的具体需求和目标用户群体,选择合适的前端路由模式至关重要。通过手写代码实践,我们不仅能加深对这两种模式的理解,还能更好地掌握如何在真实项目中灵活运用前端路由技术。

相关推荐
王哈哈^_^1 小时前
【数据集】【YOLO】【目标检测】交通事故识别数据集 8939 张,YOLO道路事故目标检测实战训练教程!
前端·人工智能·深度学习·yolo·目标检测·计算机视觉·pyqt
cs_dn_Jie2 小时前
钉钉 H5 微应用 手机端调试
前端·javascript·vue.js·vue·钉钉
好奇龙猫2 小时前
【学习AI-相关路程-mnist手写数字分类-win-硬件:windows-自我学习AI-实验步骤-全连接神经网络(BPnetwork)-操作流程(3) 】
人工智能·算法
开心工作室_kaic2 小时前
ssm068海鲜自助餐厅系统+vue(论文+源码)_kaic
前端·javascript·vue.js
有梦想的刺儿2 小时前
webWorker基本用法
前端·javascript·vue.js
sp_fyf_20243 小时前
计算机前沿技术-人工智能算法-大语言模型-最新研究进展-2024-11-01
人工智能·深度学习·神经网络·算法·机器学习·语言模型·数据挖掘
cy玩具3 小时前
点击评论详情,跳到评论页面,携带对象参数写法:
前端
香菜大丸3 小时前
链表的归并排序
数据结构·算法·链表
jrrz08283 小时前
LeetCode 热题100(七)【链表】(1)
数据结构·c++·算法·leetcode·链表
oliveira-time3 小时前
golang学习2
算法