用原生js做单页应用

用原生 JavaScript 制作单页应用

在前端开发中，单页应用（SPA）是一种非常流行的技术。它能够实现快速响应和无需加载多个页面的用户体验。在本文中，我们将使用原生 JavaScript 开发一个简单的单页应用，并介绍一些实现 SPA 的基本概念。

SPA 的基本概念

SPA 是指在一个单独的 Web 页面中加载所有必要的 HTML、CSS 和 JavaScript，并仅在需要时动态更新页面内容，而不是每次用户操作时都重新加载整个页面。这样可以减少服务器负担并提高用户体验。

为了实现 SPA，我们需要了解以下几个基本概念：

路由

路由是指根据 URL 显示不同的视图或页面的机制。在 SPA 中，我们通常使用前端路由来控制页面的切换。可以使用 JavaScript 库如 history.js 或者 page.js 来进行路由管理。

组件化

组件化是将 UI 拆分成独立的可重用部分的过程。在 SPA 中，每个页面都可以拆分成多个组件，使得我们可以通过简单的组件组合来构建复杂的用户界面。在本文的示例中，我们将使用自定义元素和 Shadow DOM 来创建组件。

数据存储

在 SPA 中，我们需要保存应用程序状态的数据，以便在不重新加载整个页面时更新视图。可以使用浏览器提供的本地存储（如 localStorage）或者向服务器发送异步请求来保存和获取应用程序状态。

一个简单的单页应用示例

现在我们将开始编写我们的单页应用示例。在本文中，我们将创建一个简单的电子邮件客户端，其界面由三个主要组件组成：邮件列表、邮件详情和邮件编辑器。

设置基本 HTML 结构

首先，我们需要设置一个基本的 HTML 结构，用于容纳我们的应用程序。我们将创建一个 index.html 文件，它包含一个顶部导航栏和一个用于显示组件内容的 <main> 元素。

--------- -----
----- -------------
------
  ----- ----------------
  ----------------------
-------
------
  -----
    ----
      ------ ---------------------------
      ------ --------------------------
      ------ ------------------------------
    -----
  ------
  -------------
-------
-------

创建路由管理器

接下来，我们需要创建一个路由管理器来处理用户导航。我们将使用 window.addEventListener() 监听 hashchange 事件，并根据 URL 中的哈希路由来决定要显示的组件。

----- ------ -
  ------------------- -
    ----------- - -------
    ------------------------------------- -- -- --------------
  -
  
  ------- -
    ----- ---- - -----------------------
    --- ---- ----- -- ------------ -
      -- ----------------------- -
        ----- ------ - -------------------------------
        ----- --------- - --- ---------------------------
        ---------------------------------------- - ---
        ------------------------------------------------------
        -------
      -
    -
  -
-

在上面的代码中，我们传递一个包含路由路径和对应组件的数组给路由管理器的构造函数。然后，我们在 route() 方法中根据当前 URL 中的哈希值查找匹配的路由，并将对应的组件添加到页面中。

创建自定义元素

现在我们需要创建三个自定义元素来表示我们的组件：`

来源：JavaScript中文网，转载请联系管理员！本文地址：https://www.javascriptcn.com/post/1050