如何制作自己的原生JavaScript路由
前言
当你想到路由时，通常会想到类似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路由的资料请关注猪先飞其它相关文章！
相关文章
- 本篇文章主要分享了通过window.navigator来判断浏览器及其版本信息的实例代码。具有一定的参考价值，下面跟着小编一起来看下吧...2017-01-23
- 这篇文章主要介绍了vue 实现动态路由的方法，文中示例代码非常详细，帮助大家更好的理解和学习，感兴趣的朋友可以了解下...2020-07-06
- 这篇文章主要介绍了js如何实现浏览器打印功能，文中示例代码非常详细，帮助大家更好的理解和学习，感兴趣的朋友可以了解下...2020-07-15
- 下面小编就为大家带来一篇利用JS实现点击按钮后图片自动切换的简单方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧...2016-10-25
- 作为前端，一直以来都知道HTTP劫持与XSS跨站脚本、CSRF跨站请求伪造。防御这些劫持最好的方法是从后端入手，前端能做的太少。而且由于源码的暴露，攻击者很容易绕过防御手段。但这不代表我们去了解这块的相关知识是没意义的，本文的许多方法，用在其他方面也是大有作用。...2021-05-24
- 这篇文章主要给大家介绍了关于Nest.js参数校验和自定义返回数据格式的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2021-03-28
- 那么今天我就用JavaScript代码来实现这个效果吧，那么首先介绍一下整个的思路，首先我们先将确定输入密码的位数，我的需求是5位，那么就用一个div标签包住5个input标签...2016-01-02
- 这篇文章主要为大家详细介绍了js+css实现回到顶部按钮back to top回到顶部按钮，感兴趣的小伙伴们可以参考一下...2016-03-03
- 这篇文章主要为大家详细介绍了js实现上传图片及时预览的相关资料，具有一定的参考价值，感兴趣的朋友可以参考一下...2016-05-09
- 这篇文章主要给大家介绍了一个关于JS正则匹配的踩坑记录，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2021-04-13
- 这篇文章主要介绍了js实现调用网络摄像头及常见错误处理，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2021-03-07
- 这篇文章主要为大家详细介绍了JS实现随机生成验证码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2021-09-06
- 这篇文章主要介绍了如何使用JavaScript实现“无缝滚动 自动播放”轮播图效果,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下...2020-08-20
- 这篇文章主要为大家详细介绍了js实现列表按字母排序，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2020-08-11
- 这篇文章主要介绍了基于JavaScript实现文字超出部分隐藏 的相关资料,需要的朋友可以参考下...2016-03-01
- 这篇文章主要介绍了js组件SlotMachine实现图片切换效果制作抽奖系统的相关资料,需要的朋友可以参考下...2016-04-19
- Vue.js通过简洁的API提供高效的数据绑定和灵活的组件系统.这篇文章主要介绍了vue.js 表格分页ajax 异步加载数据的相关资料,需要的朋友可以参考下...2016-10-20
- 为了网站的安全性，很多朋友都把密码设的比较复杂，但是如何密码不能明显示，不知道输的是对是错，为了安全起见可以把密码显示的，那么基于js代码如何实现的呢？下面通过本文给大家介绍JavaScript实现表单密码的隐藏和显示，需要的朋友参考下...2016-03-03
- 这篇文章主要介绍了JS实现响应鼠标点击动画渐变弹出层效果代码,具有非常自然流畅的动画过度效果,涉及JavaScript针对鼠标事件的响应及页面元素样式的动态操作相关技巧,需要的朋友可以参考下...2016-03-28
- 这次文章要给大家介绍的是node.JS md5加密中文与php结果不一致怎么办，不知道具体解决办法的下面跟小编一起来看看。 因项目需要，需要Node.js与PHP做接口调用，发现nod...2017-07-06