http://it.njjyzj.gov.cn

如何制作自己的原生JavaScript路由_JavaScript_网络编程

前言

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

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

简介

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

最重要的是,使用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(GSSujRevent)) window["about"].addEventListener("click", event => push(event)) wi编程客栈ndow["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});调用;

郑重声明:本文版权归原作者所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。

上一篇:TypeScript泛型参数默认类型和新的strict编译选项_JavaScript_网络编程
下一篇:浅谈JS和Nodejs中的事件驱动_JavaScript_网络编程