使用 Enhance 构建动态 MPA

在构建多页面应用程序 (MPA) 时，有无数的语言和框架可供选择。但是有一些专注于构建 MPA 的最基本语言——HTML。

对于大多数选项，您需要学习如何安装和配置许多包，以便为开发准备好最基本的 MPA。

如果有一个框架可以让您使用一个简单的 HTML 文件构建您的应用程序，如何在 Windows 10 中强制删除文件或文件夹并按照自己的方式向其中添加更多部分——例如样式、交互和数据，那会怎么样？在任何时候，您都可以部署您的应用程序，如何跟踪 Microsoft PowerPoint 中的更改即使 JavaScript 为零。

Enhance是一个可以完成所有这些的框架。

在本教程中，您将了解什么是 Enhance 以及如何使用它构建示例项目。如何跟踪 Microsoft Excel 中的更改我还将向您展示渐进增强的思维方式如何改进您构建网站的方式。

向前跳：

• 什么是增强？

• 渐进增强

• 创建一个渐进增强的示例项目

• 路由在 Enhance 中的工作原理

• API路由有什么用？

• 将表单添加到主页

• 添加自定义元素

• 定义 GET API 路由

• 显示结果

• 添加 JavaScript 以改善用户体验

什么是增强？

它的官方文档将 Enhance 定义为“一个基于 Web 标准的 HTML 框架”。如何修复音频在 Windows 10 上不起作用这意味着它允许我们使用网络平台为我们提供的标准来构建网站。

出于多种原因，这很好。首先，如何在 Microsoft Excel 中插入页眉和页脚我们的应用程序的包大小可以更小，因为我们不需要安装额外的库来完成基本的事情。如何删除 Windows 10 上的旧备份文件其次，我们的网站将具有更高的性能，因为它将使用针对浏览器运行优化的内容。如何在 Windows 10 上管理分区第三，它使团队协作变得更加容易，因为所有开发人员都知道标准，因此需要学习的东西会更少。

在 Enhance 中构建应用程序的用户界面很容易，如何在 Windows 10 中安排任务因为它基于 Web 组件。因此，我们获得了所有巨大的好处，例如可重用性、可组合性和作用域样式。

为了让事情变得更简单，Enhance 不需要我们直接使用 Web 组件 API（尽管我们可以）。相反，我们可以简单地从组件返回一个 HTML 字符串，如何在 Windows 10 上自动清空回收站它会按预期呈现它。

Enhance 处理所有必要的工作，6 款适用于 Apple MacBook 的最佳网络摄像头让 Web 组件在 SSR 中工作，如果你需要自己做，这不是一种愉快的体验。

Enhance 还为我们提供了一种通过其基于文件系统的路由器向我们的应用程序添加页面的简单方法。它不仅用于添加页面供用户查看，如何在 Zoom 会议中使用焦点模式还允许我们添加 API 路由来处理服务器请求并提供我们的应用程序所需的数据。我将在本教程的后面部分向您展示如何创建这两种路线类型。

渐进增强

增强是建立在渐进增强的思想之上的。如何在 Windows 和 Android 上的 Zoom 中分配共同主持人渐进式增强意味着您无需处理应用程序的每个方面（例如 JavaScript、获取数据或样式）来让您的应用程序为测试甚至部署做好准备。

考虑到渐进式增强，您可以逐步构建您的应用程序。如何在 Microsoft Excel 中插入复选框因此，您从 HTML 开始，将一些片段提取到组件中，如何将 iCloud 添加到 Windows 10 上的文件资源管理器向您的应用程序提供硬编码数据，获取真实数据，并在浏览器中使用 JavaScript 将用户交互性添加到您的表单中。

在上述步骤中的任何时候，如何在 MS PowerPoint 中创建透明图像效果您都应该能够测试您的应用程序甚至部署它——您可以在以后对其进行增强。

使用渐进增强的思维方式创建示例项目

现在，我们了解了 Enhance 是什么以及我们为什么要使用它。如何将 Microsoft Word 用作白板让我们学习如何构建一个简单的应用程序以查看它的运行情况。

我们将构建的应用程序将非常简单，如何将数据从 Web 导入 Microsoft Excel因此我们可以专注于概念。在这个应用程序中，我们将显示一个带有文本输入的表单，当它被提交时，服务器会将输入的文本转换为大写。

该应用程序的第一个版本不会在浏览器中使用 JavaScript。如何在 Windows 10 中调整任务栏大小这意味着在用户提交表单后，它将重新加载页面以显示结果。

之后，我们将使用 JavaScript 对其进行增强，如何在 Windows 10 上使用不同的 Microsoft Teams 帐户这样我们就可以立即在页面上看到结果，而无需重新加载。

让我们从创建一个新的 Enhance 项目开始。首先如何在 Microsoft Word 中锁定图像，确保您的计算机上安装了 Node v16 或更高版本。然后，从您的终端运行：

npm create "@enhance" ./enhance-uppercase  -y

接下来，安装依赖项并启动项目：

cd ./enhance-uppercase

npm install

npm start

之后，您应该会看到您的应用程序在http://localhost:3333/运行。

路由在 Enhance 中的工作原理

Enhance 中的路由基于文件系统，如何使用 Microsoft Outlook 上的投票按钮创建投票这意味着您添加的页面的 URL 将基于您定义页面文件的位置以及您对该文件的命名。

所有页面路由都应该位于. 如果它被命名为，如何在 Microsoft Outlook 中创建电子邮件模板那么它将是根页面——即。因此，例如，要添加页面，您需要添加.app/pages/index.html//aboutapp/pages/about.html

您可以从Enhance 文档了解更多关于路由的信息。如何在 Google 幻灯片的演示文稿中添加和使用演讲者备注在这个例子中，我们将在主页上工作，。app/pages/index.html

因此，页面路由是针对用户看到的页面。如何在 Steam 上启用双因素身份验证如果我们想定义 API 路由，那么我们可以遵循相同的约定，除了我们应该在.app/api/

API路由有什么用？

我们知道在哪里定义 API 路由，如何在 Windows 11 上管理通知但我们不知道它们的用途。让我们在这里解释一下。

当用户在 Enhance 中请求页面时，如何使用 Microsoft Spreadsheet Compare 分析 Excel 文件版本路由器会将用户请求的 URL 与开发人员在应用程序中定义的路由进行匹配。

因此，如果用户请求页面，则路由器会寻找为用户提供的服务。那是我们不为该页面定义 API 路由的时候。如果应用程序还为该请求定义了 API 路由，如何在 Windows 11 中启用和使用焦点会话则它会在服务之前执行。/aboutapp/pages/about.htmlapp/api/about.mjsapp/pages/about.html

这使我们有机会在向用户提供页面之前获取和处理任何数据。如何更改 Microsoft Teams 中的状态因此，在 Enhance 中，我们可以从请求页面的 API 路由返回任何我们想要的数据到请求的页面。

为了更好地理解这一点，让我们看一个代码示例。

如果我们以关于页面为例，我们将有：app/api/about.mjs

export async function get (request) {
  return {
    json: {
      userBio: 'example bio'
    }
  }
}

所以，当用户请求时，我们会返回 JSON 数据（因为是 GET 请求）。/aboutget

state要使用该数据，如何更改 Windows 11 中的主题我们可以从传递给页面的对象访问它。所以，页面路由应该定义在. 请注意我们如何将其定义为而不是访问数据：app/pages/about.mjs.mjs.html

export default function about ({ html, state }) {
  return html
    User bio: ${state.userBio}

将表单添加到主页

回到我们的项目中，我们需要添加一个带有文本输入的表单。如何个性化 Windows 11 锁屏因此，将所有内容替换为：app/pages/index.html

<style>
  main {
    width: 500px;
    margin: 100px auto;
    font-family: sans-serif;
  }

  form {
    display: flex;
    align-items: center;
    margin-bottom: 10px;;
  }

  input {
    border: 1px solid #888;
    border-radius: 4px;
    margin-right: 10px;
    padding: 3px 10px;
  }

  button {
    background: #eee;
    padding: 5px 10px;
    border-radius: 4px;
  }

</style>

<main>
  <form action="/">
    <input type="text" name="text" />
    <button>Convert</button>
  </form>

  <div class="result">
    Result: <span class="output"></span>
  </div>
</main>

如果您检查您的浏览器，如何在 Windows 11 上保存聚光灯图像您将看到文本输入、提交按钮和下面的结果部分。

添加自定义元素

这是一个简单的例子，但是如果你想在多个地方使用这个表单怎么办？如何更改 Windows 11 中的默认浏览器然后，最好将其提取为自定义元素。

在 Enhance 中，您可以在. 所以，如何在 Windows 11 上添加亚马逊应用商店让我们在 中创建一个目录，然后添加到.app/elements/elementsapp/uppercase-form.mjsapp/elements/

自定义元素被定义为纯函数。因此，让我们像这样定义该元素：

export default function UppercaseForm({ html }) {
  return html`
    <style>
      main {
        width: 500px;
        margin: 100px auto;
        font-family: sans-serif;
      }

      form {
        display: flex;
        align-items: center;
        margin-bottom: 10px;;
      }

      input {
        border: 1px solid #888;
        border-radius: 4px;
        margin-right: 10px;
        padding: 3px 10px;
      }

      button {
        background: #eee;
        padding: 5px 10px;
        border-radius: 4px;
      }

    </style>

    <main>
      <form action="/">
        <input type="text" name="text" />
        <button>Convert</button>
      </form>

      <div class="result">
        Result: <span class="output"></span>
      </div>
    </main>
  `
}

因此，它与我们所拥有的类似，如何在 Microsoft Word 中创建和插入签名只是 HTML 是使用参数中提供的函数呈现的。pages/index.htmlhtml

要在 中使用它，只需删除所有内容并添加：pages/index.html

<uppercase-form />

注意我们不需要导入任何东西。如何在 Windows 11 中自定义右键单击菜单Enhance 会自动导入页面中的所有自定义元素。

定义 GET API 路由

我们创建的表单已action设置为/. 这意味着当提交表单时，它会发送一个 GET 请求到. 因为我们已经在 处定义了一个页面，所以响应将显示该页面。如何回复 Microsoft Teams 中的特定消息但是，我们还需要返回带有该响应的文本的大写版本。为此，我们需要为 定义一个 GET API 路由。http://localhost:3333/pages/index.html/

按照 API 路由约定，我们应该在.app/api/index.mjs

因此，添加该文件并将以下内容放入其中：

export function get (req) {
  const text = req.query.text || ''
  const transformedText = text.toUpperCase()

  return {
    json: { transformedText }
  }
}

在上面的代码中，我们定义了一个名为的函数，如何在 Photoshop 中更改对象的颜色get因为它应该处理该页面的 GET 请求。

因为是 GET 请求，所以我们通过请求查询字符串来访问表单数据，也就是. 文本值可用，因为输入有.req.querytextname="text"

如果文本在请求中不可用（这意味着表单尚未提交），如何在 Microsoft Word 中使用查找和替换那么我们默认返回一个空字符串。const text = req.query.text || ''

将文本转换为大写后，我们将其作为 JSON 响应返回。这样我们就可以通过自定义元素访问它。让我在下一节中向您展示如何操作。如何在 Windows 11 中禁用 Microsoft Teamsstate.store.transformedText

显示结果

store正如我在上一节中提到的，如何在 Microsoft Word 中创建和插入脚注和尾注我们可以通过获取参数来访问自定义元素中的 JSON 数据。

因此，将自定义元素的参数更新为：

export default function UppercaseForm({ html, state }) {
    
    

然后，将其显示在.<span class="output">

<div class="result">
Result: <span class="output">${state.store.transformedText}</span>
</div>

现在，如果您提交表单，您应该会看到文本转换为大写并显示在结果部分。

该应用程序按预期工作并且可以部署。如何在 Outlook 电子邮件中添加和删除超链接但是，我们可以通过在不重新加载页面的情况下显示结果来改进它。为此，让我们在客户端使用一些 JavaScript 来增强我们的应用程序。

添加 JavaScript 以改善用户体验

为了使自定义元素在客户端可用（即浏览器中的 JavaScript），如何在 Windows 11 上设置桌面版 Google 云端硬盘我们需要为浏览器重新定义元素。我们将在<script>标签中执行此操作。

为简单起见，如何在 Windows 和 Mac 上为 Microsoft PowerPoint 演示文稿添加密码让我们将其定义为我们自定义元素 HTML 中的内联 JavaScript 。app/elements/uppercase-form.mjs

因此，将其添加<script>到下面的自定义元素 HTML 中</main>。

<script type="module">
  class UppercaseForm extends HTMLElement {
    constructor () {
      super()
      this.form = this.querySelector('form')
      this.output = this.querySelector('.output')
      this.form.addEventListener('submit', this.onSubmit.bind(this))
    }

    async onSubmit (e) {
      e.preventDefault()

      const formData = new FormData(e.target)
      const queryString = new URLSearchParams(formData).toString()

      const result = await fetch('/?' + queryString, {
        headers: { 'accept': 'application/json' },
        method: 'get'
      })

      const json = await result.json()
      this.output.textContent = json.transformedText
    }
  }

  customElements.define('uppercase-form', UppercaseForm)
</script>

添加这个之后，元素将在浏览器端有点“水合”。uppercase-form

现在，当用户提交表单时，如何将 iPhone 连接到 Windows 11 PC客户端 JavaScript 将通过使用浏览器的本机Fetch API发送请求来处理它。但请注意，我们需要如何将标头设置为使我们的 API 路由将其作为 JSON 响应而不是常规 HTML 响应返回。{ 'accept': 'application/json' }

如果您现在测试该应用程序，如何在 Microsoft Word 中管理书签它应该会转换文本并在不重新加载页面的情况下显示它。

这种方法的好处在于，如何在 Windows 和 iPad 上使用 Microsoft PowerPoint 进行协作即使 JavaScript 在浏览器中被禁用，我们的应用程序仍然可以运行，因为它正在逐步增强。

结论

关于 Enhance，还有很多东西需要学习。我鼓励您查看文档以了解其所有功能。

我们在本教程中探索的重要内容是当我们想要构建我们的应用程序时考虑到渐进增强时增强功能是多么强大。