使用 Vanilla JavaScript 构建自定义 SPA 路由器

介绍

在本文中，我将解释如何使用 Vanilla JavaScript 构建自定义 SPA 路由器。我必须在没有任何使用框架的情况下构建一个 UI 项目，并且必须弄清楚如何处理路由，并发现您可以轻松地使用 Vanilla JavaScript 构建自己的路由器。

免责声明

我同意我们不应该重新发明轮子的哲学。随着 ReactJS、Vue 等框架的出现，它们中的每一个都有自己的自定义路由库，我建议您使用它们而不是构建一些基础的东西。但是，本文的目的是解释使用 VanillaJS 编写自定义路由器是可能的，它还提供了一个了解幕后发生的事情的机会。

窗口 - 历史和位置对象

为了构建自定义路由器，我们首先需要了解“窗口”对象的“历史”和“位置”对象以及处理页面导航所需的一些方法。

历史对象

window.history 对象提供有关浏览器会话历史的详细信息。它包含帮助您在用户历史记录中来回导航的方法和属性。

您可以打开浏览器控制台并键入历史记录，您将看到历史记录对象的所有方法和属性，如下所示。

位置对象

window.location 包含与当前位置相关的所有信息，例如来源、路径名等。

您可以打开浏览器控制台并键入 location，您将看到与 location 对象关联的所有各种属性和方法，如下所示。

历史 - PushState()

pushState 方法用于向浏览器的会话历史堆栈添加状态。

语法：history.pushState(state, title, , url );

• state - 与新历史条目关联的 JavaScript 对象。状态对象可以是任何可以序列化的对象。
• 标题 - 现代浏览器实际上还没有使用标题。传递一个空字符串或您希望引用您的状态的标题是安全的。
• URL - 新历史记录条目的 URL 由该参数指定。

我们将使用 pushState 方法在页面导航期间更新浏览器的 URL。

窗口 - Popstate 事件

当用户浏览会话历史时活动历史发生变化时，会触发 popstate 事件。

换句话说，只要在浏览器上按下后退或前进按钮，历史就会改变，此时会触发 'popstate' 事件。

每当历史发生变化时，我们将使用“popstate”事件来处理逻辑。

实现路由器

现在我们已经掌握了基础知识，我们将逐步了解使用 VanillaJS 实现路由器的方法。

风景

index.html 是一个非常简单的页面，其中包含页面链接的无序列表：

• home
• about
• contact

此外，home、about和contact视图有 3 个单独的 HTML。

index.html

home.html

about.html

contact.html

加载 HTML 页面（异步）

我使用带有“fetch API”的 async/await 来异步加载页面，并使用“promise”将值分配给 home、about 和 contact 变量。

让我们浏览一页的流程：

• 当调用 'loadAllPages' 函数时，第一个函数 loadPage('home.html') 首先被触发。
• 在 'loadPage' 函数中，将触发 fetch('home.html') 以异步加载 home.html。
• 'await' 关键字确保填充了 'response' 变量并且为 'resHtml' 分配了 'response.text()'，因为文本是在 API 调用中返回的。
• 'resHtml' 的值返回给 'loadAllPages' 函数并分配给 'home' 变量。

同样，API 调用也会针对“about”和“contact”页面进行，并将值填充到变量 about & contact。

主要功能和根元素

从“index.html”文档中获取“rootDiv”。

main 函数将在页面加载时调用。在主函数内部，我们首先确保将所有 HTML 页面加载到变量“home”、“about”和“contact”中。

为了确保在页面加载时将“主页”页面加载到根元素，将 rootDiv.innerHTML 设置为“主页”变量。

此外，“路由”设置有相应的页面映射，以便在调用路由时加载适当的页面。

路由 - 在主页上单击链接时

在上面的 index.html 中，我们正在调用“onNavClick”方法并在单击“a”链接时传入“路线”，如下面的代码片段所示。

onNavClick 方法接受“路径名”，即“路线”链接，并使用 window.history.'pushState' 方法更改状态。

第二行“rootDiv.innerHTML = routes pathname ”将根据主函数中路由中配置的内容呈现适当的页面（见上文）。

此时，您有一个功能路由器，可在单击链接时导航到相应的页面，并且相应的链接也会在 URL 浏览器中更新。

您唯一会注意到的是，当您点击浏览器上的“后退”或“前进”按钮时，URL 上的链接会正确更新，但是页面上的内容不会刷新。

让我们在文章的最后一部分处理这个问题。

在状态更改时处理页面呈现

如果您还记得上面对“onpopstate event”方法的定义，那么只要浏览器中的活动历史记录发生变化，就会调用它。

我们正在使用该钩子来确保 rootDiv 根据配置的路由填充了适当的页面。

而已！！您现在应该拥有一个使用 Vanilla JavaScript 构建的功能齐全的自定义路由器。

如果你想要完整的代码，你可以在 Github 上 找到它。

结论

总而言之，我们已经介绍了如何使用 VanillaJS 构建基本的自定义路由器。路由器主要使用窗口的历史和位置对象以及方法 pushState 和 onpopstate 事件。

本文由 在线网速测试 整理编辑，转载请注明出处。