如何制作自己的原生JavaScript路由


Posted in Javascript onMay 05, 2021

前言

当你想到路由时,通常会想到类似react之类的库。但实际上,这些库和框架仍然使用vanillaJavaScript。那么该怎么实现呢?

我希望这个“JavaScript路由教程”能够帮你了解如何用原生js写出自己的路由。

简介

我遇到了很多出于各种原因想要自己创建路由的人。既然你看到本文,那意味着你可能也是其中的一个!

最重要的是,使用vanillajsrouter可以减少你对框架的依赖。

只要你了解实现它所涉及的所有部分,就可以相对容易的在原生 JavaScript 中创建自己的路由。

以下是制作自己的JS router时要了解的关键事项:

1.原生 JS 路由的关键是location.pathname属性。

2.侦听 “popstate”事件以响应.pathname的更改。每当在浏览器的地址栏中输入新的 URL,但我们不想刷新页面时,就会发生这种情况,我们只是想通过加载新内容来刷新视图。

3.你可以选择将路由存储在routes[]数组中。

4.必须用JavaScript 正则表达式(RegEx)才能解析 URL。

5.如果希望将路由集成到本机浏览器体系结构中,那么对history和history.pushState(JavaScript 的 History API)的基本了解至关重要。

首先,我们将处理 History API。

JavaScript 的 History API

我看过很多没有提到 JavaScript History API 的vanilla JS router教程。太糟糕了,因为单击浏览器的“后退”和“前进”按钮与浏览历史记录中的 URL 导航有关。如果没有 History API,就无法谈论路由。

1.history.back()与history.go(-1)相同,或者当用户在浏览器中单击Back按钮时。你可以用任何一种方法达到相同的效果。

2.当用户按下浏览器的Forward按钮时,将执行history.forward(),它等效于history.go(1)”。

3.go()与.back()和forward()方法相似,不同之处在于你可以指定浏览器历史记录栈中要前进或后退的步数。 。

4.pushState()会将新状态推送到 History API。

5..length属性是会话历史记录中的元素数。

6..state属性用于查找状态,而无需侦听“ popstate”事件。

实现自己的原生JS路由

基于 History API 的 Vanilla JS 路由设置

先让我们仔细研究构建 URL 切换器所需的最少代码(而无需刷新页面),然后我会向你展示其的工作方式的 GIF 动图。

<html>
    <head>
        <title>Hello</title>
        <script type = "module">
            function select_tab(id) {
                // remove selected class from all buttons
                document.querySelectorAll(".route").forEach(item => item.classList.remove('selected'));
                // select clicked element (visually)
                document.querySelectorAll("#" + id).forEach(item => item.classList.add('selected'));
            }
            function load_content(id) {
                // Update text "Content loading for {id}..."
                // Of course, here you would do you content loading magic
                // Perhaps run Fetch API to update resources
                document.querySelector("#content").innerHTML = 'Content loading for /' + id + '...';
            }
            function push(event) {
                // Get id attribute of the box or button or link clicked
                let id = event.target.id;
                // Visually select the clicked button/tab/box
                select_tab(id);
                // Update Title in Window's Tab
                document.title = id;
                // Load content for this tab/page
                loadContent(id);
                // Finally push state change to the address bar
                window.history.pushState({id}, `${id}`, `/page/${id}`);
            }
            window.onload = event => {
                // Add history push() event when boxes are clicked
                window["home"].addEventListener("click", event => push(event))
                window["about"].addEventListener("click", event => push(event))
                window["gallery"].addEventListener("click", event => push(event))
                window["contact"].addEventListener("click", event => push(event))
                window["help"].addEventListener("click", event => push(event))
            }
            // Listen for PopStateEvent (Back or Forward buttons are clicked)
            window.addEventListener("popstate", event => {
                // Grab the history state id
                let stateId = event.state.id;
                // Show clicked id in console (just for fun)
                console.log("stateId = ", stateId);
                // Visually select the clicked button/tab/box
                select_tab(stateId);
                // Load content for this tab/page
                loadContent(id);
            });
        </script>
        <style>
            * { /* global font */
                font-family: Verdana;
                font-size: 18px;
            }
            #root { display: flex; flex-direction: row; }
            #content { display: flex;
                display: block;
                width: 800px;
                height: 250px;
                /* vertically centered text */
                line-height: 250px;
                border: 2px solid #555;
                margin: 32px;
                text-align: center;
            }
            .route {
                cursor: pointer;
                justify-content: center;
                width: 150px;
                height: 50px;
                /* vertically centered text */
                line-height: 50px;
                position: relative;
                border: 2px solid #555;
                background: white;
                text-align: center;
                margin: 16px;
            }
            .route.selected { background: yellow; }
        </style>
    </head>

    <body>

        <section id = "root">
            <section class = "route" id = "home">/home</section>
            <section class = "route" id = "about">/about</section>
            <section class = "route" id = "gallery">/gallery</section>
            <section class = "route" id = "contact">/contact</section>
            <section class = "route" id = "help">/help</section>
        </section>

        <main id = "content">Content loading...</main>
    
    </body>

</html>

核心是对的window.history.pushState({id}, ${id}, /page/${id});调用;

第一个参数是状态的唯一 ID,第二个是“标签标题”文本,第三个参数是你希望地址栏中要现实的路径。这就是使浏览器无需重新加载页面即可更改 URL 的原因。

结果。现在,每次我们单击按钮时,URL实际上都会在浏览器的地址栏中更改。内容框也会更新。

我们的原生 JS 路由开始运行了。请注意,每次单击按钮时,history.pushState 被触发。我们只需将存储在元素的 id 属性中的 clicked 元素的 id 传递给它即可:home,about,gallery等。它们应与你要导航到的实际页面一致。当然这不是存储页面名称的唯一方法,例如可以用 array [] 或其他任何方式。这就是本例中的操作方式。

当然我们还需要从服务器加载有关该位置的布局和资源的内容。这取决于你的程序。可以是任何东西。

使“后退”和“前进”按钮起作用

通过使用history.pushState,你将自动使Back和Forward按钮导航到上一个或下一个状态。这样做会产生popstate事件。这是你必须再次更新视图的部分。 (第一次是我们单击按钮时。)

但是由于该事件带有单击的id,因此单击Back或Forward时很容易刷新视图并重新加载内容。

我们在这里没有使用react或vue,因此在我的源代码中load_content将负责直接在 DOM 中更新视图。此区域可能填充了你的 API 加载的某些内容。由于这只是“前端”示例,因此我无法向你展示太多内容。但这就是它在客户端上的工作方式。

初始化服务器端的路由负载

将它们放在一起还需要再执行一个步骤。在我的例子中,只用了router.html。当你第一次在 PWA 中加载此路由时,必须确保如果直接在地址栏中输入/page/home时,它可以工作。

到目前为止,我们仅从前端更改了路由器地址。假定每次你导航到出现在路由按钮上的 URL 时,实际上都会从服务器单独加载该 URL。

因此你有责任确保/page/about将路由器和页面的加载到应用程序的根视图中。它还应突出显示“current”按钮。

实施完毕后,你的路由就完成了。你如何选择重新加载#content元素中的内容完全取决于你自己和你的后端设计。

以上就是如何制作自己的原生JavaScript路由的详细内容,更多关于制作原生JavaScript路由的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
IE不出现Flash激活框的小发现的js实现方法
Sep 07 Javascript
jQuery 数据缓存data(name, value)详解及实现
Jan 04 Javascript
jquery单行文字向上滚动效果示例
Mar 06 Javascript
jQuery及JS实现循环中暂停的方法
Feb 02 Javascript
常见的javascript跨域通信方法
Dec 31 Javascript
深入理解js数组的sort排序
May 28 Javascript
Angular.JS中的指令引用template与指令当做属性详解
Mar 30 Javascript
vue中简单弹框dialog的实现方法
Feb 26 Javascript
JavaScript引用类型Function实例详解
Aug 09 Javascript
layui获取多选框中的值方法
Aug 15 Javascript
理顺8个版本vue的区别(小结)
Sep 17 Javascript
详解ES6 系列之异步处理实战
Oct 26 Javascript
Vue项目中如何封装axios(统一管理http请求)
May 02 #Vue.js
如何用JavaScript学习算法复杂度
JS不要再到处使用绝对等于运算符了
Apr 30 #Javascript
如何用Node.js编写内存效率高的应用程序
用几道面试题来看JavaScript执行机制
Apr 30 #Javascript
详解前端任务构建利器Gulp.js使用指南
Apr 30 #Javascript
浅谈node.js中间件有哪些类型
Apr 29 #Javascript
You might like
PHP+APACHE实现用户论证的方法
2006/10/09 PHP
apache2.2.4+mysql5.0.77+php5.2.8安装精简
2009/04/29 PHP
Look And Say 序列php实现代码
2011/05/22 PHP
destoon网站转移服务器后搜索汉字出现乱码的解决方法
2014/06/21 PHP
javascript 多级checkbox选择效果
2009/08/20 Javascript
jQuery UI Autocomplete 体验分享
2012/02/14 Javascript
JS 日期比较大小的简单实例
2014/01/13 Javascript
JavaScript获取图片的原始尺寸以宽度为例
2014/05/04 Javascript
js 动态修改css文件用到了cssRule
2014/08/20 Javascript
JavaScript字符串常用的方法
2016/03/10 Javascript
分享JS代码实现鼠标放在输入框上输入框和图片同时更换样式
2016/09/01 Javascript
关于Javascript中defer和async的区别总结
2016/09/20 Javascript
Chrome不支持showModalDialog模态对话框和无法返回returnValue问题的解决方法
2016/10/30 Javascript
AngularJS基于ngInfiniteScroll实现下拉滚动加载的方法
2016/12/14 Javascript
Bootstrap fileinput组件封装及使用详解
2017/03/10 Javascript
mui开发中获取单选按钮、复选框的值(实例讲解)
2017/07/24 Javascript
vue2.0基于vue-cli+element-ui制作树形treeTable
2019/04/30 Javascript
详解Vue 的异常处理机制
2020/11/30 Vue.js
[38:42]完美世界DOTA2联赛循环赛 Matador vs Forest BO2第二场 11.05
2020/11/05 DOTA
Python正则表达式如何进行字符串替换实例
2016/12/28 Python
使用python爬取抖音视频列表信息
2019/07/15 Python
Python pip 安装与使用(安装、更新、删除)
2019/10/06 Python
使用Python给头像加上圣诞帽或圣诞老人小图标附源码
2019/12/25 Python
keras中的卷积层&amp;池化层的用法
2020/05/22 Python
Python 忽略文件名编码的方法
2020/08/01 Python
python爬虫scrapy图书分类实例讲解
2020/11/23 Python
Html5如何唤起百度地图App的方法
2019/01/27 HTML / CSS
英国皇室御用百货:福南梅森(Fortnum & Mason)
2017/12/03 全球购物
2014年创先争优活动总结
2014/05/04 职场文书
师德师风整改措施
2014/10/24 职场文书
2014年校长工作总结
2014/12/11 职场文书
python爬虫selenium模块详解
2021/03/30 Python
CSS 圆形进度栏
2021/04/06 HTML / CSS
golang 比较浮点数的大小方式
2021/05/02 Golang
Go语言基础map用法及示例详解
2021/11/17 Golang
python 中的jieba分词库
2021/11/23 Python