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

疯狂的技术宅

发布于 2020-03-27 16:06:19

3.8K0

发布于 2020-03-27 16:06:19

文章被收录于专栏：京程一灯京程一灯

翻译：疯狂的技术宅

作者：@js_tut

来源：freecodecamp

正文共：2497 字

预计阅读时间：7 分钟

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

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

简介

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

最重要的是，使用 vanilla JS router 可以减少你对框架的依赖。

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

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

原生 JS 路由的关键是 location.pathname 属性。
侦听 “popstate ”事件以响应.pathname 的更改。每当在浏览器的地址栏中输入新的 URL，但我们不想刷新页面时，就会发生这种情况，我们只是想通过加载新内容来刷新视图。
你可以选择将路由存储在 routes[] 数组中。
必须用 JavaScript 正则表达式（RegEx）才能解析 URL。
如果希望将路由集成到本机浏览器体系结构中，那么对 history 和 history.pushState（JavaScript 的 History API）的基本了解至关重要。

首先，我们将处理 History API。

JavaScript 的 History API

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

history.back() 与 history.go(-1) 相同，或者当用户在浏览器中单击 Back 按钮时。你可以用任何一种方法达到相同的效果。
当用户按下浏览器的 Forward 按钮时，将执行 history.forward()，它等效于 history.go(1)”。
go() 与 .back() 和 forward() 方法相似，不同之处在于你可以指定浏览器历史记录栈中要前进或后退的步数。。
pushState() 会将新状态推送到 History API。
.length 属性是会话历史记录中的元素数。
.state 属性用于查找状态，而无需侦听**“ popstate” **事件。

现在开始实现我们自己的原生 JS 路由！

我将简单地对的 HTML、CSS 和 **JavaScript **进行注释。

基于 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},${i}, /page/${id}); 调用；

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

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

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

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