使用自定义 JavaScript 创建 UI 微件

重要提示：此文档不适用于你当前选择的格式故事！

在本教程中，你将学习如何使用 <amp-script>，这是一个允许开发者在 AMP 中编写自定义 JavaScript 的组件。你将使用它来构建一个微件，该微件检查密码输入字段的内容，仅在满足某些要求时才允许提交。AMP 已经使用 <amp-form> 提供了此功能，但是 <amp-script> 将使你能够创建自定义体验。

你将需要

一个现代的网络浏览器
HTML、CSS 和 JavaScript 的基本知识
要么
- 本地网络服务器和代码编辑器，例如 SublimeText 或 VSCode
- 或者 CodePen、Glitch 或类似的在线游乐场

背景

AMP 旨在使网站对用户更快，更稳定。过多的 JavaScript 会使网页速度变慢。但是有时你需要创建 AMP 组件不提供的功能。在这种情况下，你可以使用 <amp-script> 组件来编写自定义 JavaScript。

让我们开始吧！

开始

要获取入门代码，请下载或克隆这个 github 存储库。完成此操作后，cd 进入你创建的目录。你将看到两个目录：starter_code 和 finished_code。finished_code 包含你将在本教程中创建的内容。因此，我们暂时不要看它。相反，cd 进入 starter_code。这包含一个使用 <amp-form> 单独实现表单的网页，无需 <amp-script> 的帮助。

要执行此练习，你需要在计算机上运行网络服务器。如果你已经这样做，那么一切就绪！如果这样，根据你的设置，你可以通过在浏览器中键入类似于 https://127.0.0.1/amp-script-tutorial/starter_code/index.html 的 URL 来访问起始网页。

或者，你可以使用 serve（一个基于 Node.js 的静态内容服务器）之类的工具来设置快速本地服务器。如果你尚未安装 Node.js，请在此处下载。安装 Node 后，在命令行中键入 npx serve。然后，你可以在此处访问你的网站

https://127.0.0.1:5000/

你也可以自由使用在线游乐场，如 Glitch 或 CodePen。此包含与 github 存储库相同的代码，如果你愿意，也可以从那里开始！

完成此操作后，你将看到我们的起始网页

在你的收藏代码编辑器中打开 starter_code/index.html。查看此表单的 HTML。请注意，密码 <input> 包含此属性

on="tap:rules.show; input-debounced:rules.show"

这会告诉 AMP 当用户点击或单击密码 <input> 时以及在他们输入任何字符后显示规则 <div>。我们希望使用 focus 事件，这也将涵盖用户选项卡进入输入的情况。至少在编写本教程时，AMP 不会传递此事件，因此我们没有此选项。不用担心。我们即将使用 <amp-script> 来修复它！

密码 <input> 包含另一个有趣的属性

pattern="^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[^a-z\d]).{8,}$"

此正则表达式组合了一组较小的正则表达式，每个表达式都表达了我们的一个验证规则。在输入内容匹配之前，AMP 不允许提交表单。如果用户尝试，他们将看到一个错误消息，该消息没有提供太多详细信息

由于我们提供给你的代码不包含处理表单提交的网络服务，因此提交表单不会执行任何有用的操作。当然，欢迎你将此功能添加到自己的代码中！

这种体验是可以接受的-但不幸的是，AMP 无法解释我们的哪个验证规则失败了。它无法知道，因为我们不得不将规则压缩为单个正则表达式。

现在，让我们使用 <amp-script> 来构建更用户友好的体验！

使用 <amp-script> 重建

要使用 <amp-script>，我们需要导入其自身的 JavaScript。打开 index.html 并将以下内容添加到 <head> 中。

<head>
 ...
  <script async custom-element="amp-script" src="https://cdn.ampproject.org/v0/amp-script-0.1.js"></script>
  ...
</head>

<amp-script> 允许我们以内联方式或在外部文件中编写自己的 JavaScript。在本练习中，我们将编写足够多的代码来证明单独的文件是合理的。创建一个名为 js 的新目录，并向其中添加一个名为 validate.js 的新文件。

<amp-script> 允许你的 JavaScript 操作其 DOM 子元素-该组件包含的元素。它将这些 DOM 子元素复制到虚拟 DOM 中，并使你的代码可以访问此虚拟 DOM。在本练习中，我们希望我们的 JavaScript 控制我们的 <form> 及其内容。因此，我们将 <form> 包装在 <amp-script> 组件中，如下所示

<amp-script src="js/validate.js" layout="fixed" sandbox="allow-forms" height="500" width="750">
  <form method="post" action-xhr="#" target="_top" class="card">
    ...
  </form>
</amp-script>

我们的 <amp-script> 包括属性 sandbox="allow-forms"。这告诉 AMP，脚本可以修改表单的内容。

由于 AMP 旨在保证快速、视觉稳定的用户体验，因此它不会让我们的 JavaScript 随时对 DOM 进行无限制的更改。如果 <amp-script> 组件的大小不能更改，则你的 JavaScript 可以进行更多更改。它还允许在用户交互后进行更多实质性更改。你可以在参考文档中找到详细信息。对于本教程，足以知道我们已指定一个非 container 的 layout 类型，并且我们已使用 HTML 属性来锁定组件的大小。这意味着任何 DOM 操作都仅限于页面的特定区域。

如果你使用的是 AMP 验证器 Chrome 扩展，你现在将看到错误消息

如果你没有此扩展，请将 #development=1 附加到你的 URL，AMP 将向你的控制台输出验证错误。

这是什么意思？如果你的 <amp-script> 从外部文件加载其 JavaScript，则 AMP 要求你指定绝对 URL。我们可以通过使用 https://127.0.0.1/js/validate.js 来解决此问题。但是，AMP 还要求使用 HTTPS。因此，我们仍然会收到验证错误，并且在本地网络服务器上设置 SSL 超出了本教程的范围。如果你想这样做，可以按照这篇文章中的说明进行操作。

接下来，我们可以从表单中删除 pattern 属性及其正则表达式：我们将不再需要它！

我们还将删除当前用于告诉 AMP 显示密码规则的 on 属性。如上所述，我们将改为使用 <amp-script> 来捕获浏览器的 focus 事件。

pattern="^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[^a-z\d]).{8,}$"
on="tap:rules.show; input-debounced:rules.show"

现在，让我们确保我们的 <amp-script> 正常工作。打开你创建的 validate.js 文件并添加调试消息

console.log("Hello, amp-script!");

转到你的浏览器，打开控制台，然后重新加载页面。确保看到你的消息！

我的 JavaScript 在哪里？

<amp-script> 在 Web Worker 中运行你的 JavaScript。 Web Worker 不能直接访问 DOM，因此 <amp-script> 使 Worker 可以访问 DOM 的虚拟副本，该副本与真实的 DOM 保持同步。 <amp-script> 提供了许多常见 DOM API 的模拟，几乎所有这些 API 你都可以以通常的方式在 JavaScript 中使用。

如果需要随时调试你的脚本，可以像调试任何 JavaScript 一样在 Web Worker 的 JavaScript 中设置断点。你只需要知道在哪里可以找到它。

在 Chrome DevTools 中，打开“源”标签。在底部，你将看到一个长十六进制字符串，如下所示。展开它，然后展开“无域名”区域，你将看到你的脚本

添加我们的 JavaScript

现在我们知道 <amp-script> 正在运行，让我们编写一些 JavaScript！

我们要做的第一件事是抓取我们将要使用的 DOM 元素，并将它们存放在全局变量中。我们的代码将使用密码输入，提交按钮以及显示密码规则的区域。将这三个声明添加到 validate.js

const passwordBox = document.getElementById("passwordBox");
const submitButton = document.getElementById("submitButton");
const rulesArea = document.getElementById("rules");

请注意，我们能够使用像 getElementById() 这样的常规 DOM API 方法。尽管我们的代码在 Worker 中运行，并且 Worker 无法直接访问 DOM，但 <amp-script> 提供了 DOM 的虚拟副本，并模拟了一些常见的 API，这些 API 在此处列出。这些 API 为我们提供了足够的工具来涵盖大多数用例。但是，请务必注意，仅支持 DOM API 的子集。否则，<amp-script> 中包含的 JavaScript 将非常庞大，从而抵消了 AMP 的性能优势！

我们需要将这些 ID 添加到两个元素中。打开 index.html，找到密码 <input> 和提交 <button>，然后添加 ID。同时向提交 <button> 添加 disabled 属性，以防止用户在我们需要时单击它。

<input type=password
       id="passwordBox"

...

<button type="submit" id="submitButton" tabindex="3" disabled>Submit</button>

重新加载页面。你可以像使用非 Worker JavaScript 一样，在控制台中检查以验证是否正确设置了这些全局变量

我们还会给 <div id="rules"> 中的每个 <li> 添加 id。每个 <li> 都包含一条单独的规则，我们需要控制这些规则的颜色。同时，我们会删除每个 class="invalid" 实例。我们的新 JavaScript 将在需要时添加它！

<ul>
  <li id="lower">Lowercase letter</li>
  <li id="upper">Capital letter</li>
  <li id="digit">Digit</li>
  <li id="special">Special character (@$!%*?&)</li>
  <li id="eight">At least 8 characters long</li>
</ul>

在 JavaScript 中实现我们的密码检查

接下来，我们将从 pattern 属性中解包正则表达式。每个正则表达式都代表着我们的一条规则。让我们在 validate.js 的底部添加一个对象映射，将每条规则与其检查的条件关联起来。

const checkRegexes = {
  lower: /[a-z]/,
  upper: /[A-Z]/,
  digit: /\d/,
  special: /[^a-zA-Z\d]/i,
  eight: /.{8}/
};

设置好这些全局变量后，我们就可以编写检查密码并相应调整 UI 的逻辑了。我们将把逻辑放在名为 initCheckPassword 的函数中，该函数接受一个参数——密码 <input> 的 DOM 元素。这种方法很方便地将 DOM 元素隐藏在闭包中。

function initCheckPassword(element) {

}

接下来，让我们用我们需要的功能和事件监听器赋值来填充 initCheckPassword。首先，添加一个小函数，如果规则通过，则将单个规则 <li> 变为绿色；另一个函数，如果规则失败，则将其变为红色。

function initCheckPassword(el) {
  const checkPass = (el) => {
    el.classList.remove("invalid");
    el.classList.add("valid");
  };

  const checkFail = (el) => {
    el.classList.remove("valid");
    el.classList.add("invalid");
  };
};

让我们让 valid 和 invalid 类实际上将文本变为绿色或红色。回到 index.html，并将这两条规则添加到 <style amp-custom> 标签中。

li.valid {
  color: #2d7b1f;
}

li.invalid {
  color:#c11136;
}

现在，我们准备添加检查密码 <input> 内容是否符合我们规则的逻辑。在 initCheckPassword() 的结束花括号之前添加一个名为 checkPassword() 的新函数。

const checkPassword = () => {
  const password = element.value;
  let failed = false;

  for (const check in checkRegexes) {
    let li = document.getElementById(check);

    if (password.match(checkRegexes[check])) {
      checkPass(li);
    } else {
      checkFail(li);
      failed = true;
    }
  }

  if (!failed) {
    submitButton.removeAttribute("disabled");
  }
};

此函数执行以下操作：

获取密码 <input> 的内容。
创建一个名为 failed 的标志，初始化为 false。
遍历每个正则表达式，并针对密码进行测试。
- 如果密码测试失败，则调用 checkFail() 将相应的规则变为红色。同时，将 failed 设置为 true。
- 如果密码测试通过，则调用 checkPass() 将相应的规则变为绿色。
最后，如果没有规则失败，则密码有效，我们启用“提交”按钮。

我们现在只需要几个事件监听器。还记得我们在 AMP 中无法使用 focus 事件吗？在 <amp-script> 中，我们可以。每当密码 <input> 收到 focus 事件时，我们将显示规则。每当用户在该输入中按下按键时，我们将调用 checkPassword()。

将这两个事件监听器添加到 initCheckPassword() 的底部，紧挨着结束花括号。

element.addEventListener("focus", () => rulesArea.removeAttribute("hidden"));
element.addEventListener("keyup", checkPassword);

最后，在 validate.js 的末尾，添加一行代码，用密码 <input> DOM 元素初始化 initCheckPassword。

initCheckPassword(passwordBox);

我们的逻辑现在已完成！当密码匹配我们所有的标准时，所有规则都将变为绿色，并且我们的提交按钮将被启用。您现在应该能够进行如下交互：

如果您遇到困难，可以随时参考 finished_code 目录中的工作代码。

恭喜！

您已经学习了如何使用 <amp-script> 在 AMP 中编写自己的 JavaScript。您已经成功地使用自己的自定义逻辑和 UI 功能增强了 <amp-form> 组件！随意为您的新页面添加更多功能！要了解有关 <amp-script> 的更多信息，请查看参考文档。

由 @morsssss 和 @CrystalOnScript 编写