在 AMP 页面中使用自定义 JavaScript

amp-script 允许您编写并运行自己的 JavaScript，而不会影响 AMP 的性能保证。大多数 AMP 组件通过自己的逻辑启用常见的 Web 交互，让您无需编写 JavaScript 或导入第三方库即可快速构建页面。通过使用 amp-script，您可以针对特定用例或独特需求采用自定义逻辑，而不会失去 AMP 的优势。

本指南提供了此组件的背景信息和最佳实践。

Web 工作人员

过多的 JavaScript 会使网站变慢且无响应。为了控制 AMP 页面加载哪些 JavaScript 以及何时执行，AMP 的验证规则禁止开发者通过 <script> 标签在网页中运行 JavaScript。

Web 工作人员提供了一种更安全地运行 JavaScript 的方法。通常，所有 JavaScript 都在一个线程中运行，但每个工作人员都在自己的线程中运行。这是可能的，因为它们无法访问 DOM 或 window 对象，并且每个工作人员都在自己的全局作用域中运行。因此，它们不能相互干扰工作或主线程中的代码引起的突变。它们只能通过包含对象的邮件与主线程和彼此通信。工作人员提供了一条通往多线程 Web 的路径，一种将 JavaScript 封装在沙盒中的方法，使其无法阻止 UI。

工作人员无法访问 DOM。为了填补这一空白，AMP 团队创建了一个名为 WorkerDOM 的开源库。WorkerDOM 将 DOM 复制到虚拟 DOM，并将副本提供给工作人员。WorkerDOM 还重新创建了标准 DOM API 的一个子集。当工作人员对虚拟 DOM 进行更改时，WorkerDOM 会在真实 DOM 中重新创建这些更改。这使工作人员能够使用标准技术操作 DOM 并对页面进行更改。DOM 同步仅单向进行。如果主线程修改了 DOM，则没有机制让工作人员知道。

amp-script 是 WorkerDOM 的包装器，它使 WorkerDOM 可在 AMP 中使用，提供与 AMP 功能的连接、建立开发者 API，并引入保护用户体验的限制。WorkerDOM 提供了 amp-script 功能的核心。

`amp-script` 概述

JavaScript 语言在 worker 中与在浏览器的其他位置相同。因此，在 amp-script 中，你可以使用 JavaScript 提供的所有常用结构。WorkerDOM 还重新创建了许多常用的 DOM API，并使它们可供你使用。它支持 Fetch 和 Canvas 等常见的 Web API，并为你提供了 navigator 和 localStorage 等选定的全局对象。你可以用通常的方式为浏览器事件分配处理程序。

但是，amp-script 并不支持整个 DOM API 或 Web API，因为这会使它自己的 JavaScript 变得太大且笨重。有关详细信息，请参阅文档，并参考这些示例以了解 amp-script 的使用。

amp-script 用返回 Promise 的替代方法替换了一些同步 DOM API 方法。例如，你使用 getBoundingClientRectAsync() 而不是 getBoundingClientRect()。有时，这对于提供对已计算布局的同步访问的 DOM API 是必要的，有时是为了让 amp-script 可以调用本机浏览器方法并等待响应。

为了保持 AMP 对性能和布局稳定性的保证，amp-script 带有一些限制。如果 amp-script 容器的大小不是固定的，你的代码只能在用户交互触发时进行突变。你不能向 DOM 添加样式表或其他脚本，并且 importScripts() 不受支持。有关详细信息，请参阅文档。

使用 JavaScript 框架

由于 DOM API 不完全受支持，如何在 amp-script 中以最佳方式处理 DOM？这里有两种可能性。

1) 了解支持的内容。了解受支持的丰富 API。你需要以不同的方式考虑 DOM API - 不再将其视为多年来开发的大量属性和方法的集合，而更多地将其视为一组简洁的工具。

2) 使用 Preact。React 不仅是构建网站的流行方式，而且还使用 DOM API 的子集来改变 DOM。amp-script 可以完全支持 API 的这一部分，从而完全支持 React。也就是说，React 捆绑包通常会超过 amp-script 的 150K 限制。因此，建议你使用 Preact，它是 React 的轻量级替代品。Preact 旨在从 React 直接迁移。使用 Preact，你应该能够构建精细的交互，而不用过多担心支持的内容。

该团队已经使用 Vue、Angular、Aurelia 和 lit-html 等框架对 amp-script 进行了测试，但测试范围较小。如果你发现差距，请提交问题 - 或者，更好的是，提交拉取请求。

由于 amp-script 无法详尽地支持 DOM API，因此简单地将 jQuery 等库复制到 <amp-script> 组件中将不起作用。

用例

amp-script 扩展了 AMP 网页的功能范围。由于它支持 DOM 和 Web API 的子集，并且由于它的使用带有限制，因此它不是一个通用的 JavaScript 解决方案。任何现有的 JavaScript 主体可能都需要修改才能在 amp-script 上下文中工作。

但是，amp-script 提供了一种很好的方法来处理现有 AMP 组件不提供的逻辑和交互。以下是一些极好的用例。

创建新的交互

amp-script 为您提供了 JavaScript 和 DOM API 的强大功能。它允许您创建其他 AMP 组件无法创建的交互，从而为 Web 的全部创造力打开了一扇门。

也就是说，在转向 amp-script 创建新交互之前，请检查 AMP 组件或组件组合是否可以执行相同操作。利用现有的 AMP 组件最终会使您的代码更小、更易于维护。如果某个组件可以实现与您想要的效果类似的效果，您可能可以使用 amp-script 自定义其行为。

如果您使用 amp-script 创建可能对其他开发者感兴趣的交互，请考虑建议或贡献新组件。

添加高级逻辑

当您的逻辑不适合简洁的表达式时，amp-script 是最佳选择。amp-bind 允许您将逻辑引入用户交互，但您的 JavaScript 需要适合单个表达式。由于代码封装在 HTML 属性中，因此它不会在您的 IDE 中获得语法高亮的优势，您无法设置断点，调试可能是一个挑战。在这种情况下，amp-script 允许您遵循最佳编程实践。

增强 AMP 组件

amp-script 可以访问 AMP 状态变量以及 AMP.getState() 和 AMP.setState() 方法。这提供了一条使用您自己的逻辑增强现有 AMP 组件的途径。它还可以影响 <amp-script> 组件本身之外的 DOM。请在此处和此处查看示例。

替换 amp-bind 和 amp-list

如果您是 AMP 的新手并且熟悉 JavaScript，那么可能很想对每个浏览器交互使用 amp-script。但是，对于更简单的交互，您可能需要学习使用 amp-bind 和 AMP 的操作和事件系统。对于更精细的交互，或需要更多逻辑和复杂状态变量操作的情况，amp-script 可能会更容易。

处理服务器数据

AMP 允许你使用 amp-list 检索服务器数据，并使用 amp-mustache 对其进行格式化。在 mustache 模板不足够的情况下，amp-script 可以获取数据、对其进行格式化，并将格式化后的数据注入到 DOM 中。如果你需要在将服务器数据发送到 amp-mustache 之前对其进行处理，则 amp-script 函数可以成为 amp-list 的数据源。有关详细信息和代码示例，请参阅文档。

引入新功能

你可以使用 amp-script 来利用当前 AMP 组件无法访问的 Web API 和 DOM API 区域，或以 AMP 组件不支持的方式使用这些 API。例如，amp-script 支持 WebSockets（示例）、localStorage 和 Canvas。它支持各种浏览器事件，因此你可以监听 AMP 传递给传统组件的事件之外的事件。由于 amp-script 提供对 navigator 对象的访问，因此你可以检索有关用户的浏览器或首选语言的信息。

何时替换 amp-bind 和 amp-list

对于熟悉 JavaScript 的新 AMP 开发人员来说，始终使用 amp-script 可能比学习 amp-bind 和 amp-list 更容易。但是，在某些情况下，amp-bind 和 amp-list 更合适。

对于基本交互，amp-bind 通常更直接，因为它与 HTML 标记紧密集成。在此示例中，按一个按钮会更改一个文本片段。AMP 的数据绑定使此操作变得简单易读

<p [text]="name">Rajesh</p>
<button on="tap:AMP.setState({name: 'Priya'})">I am Priya</button>

类似地，当你使用一个由你控制输出的 API 时，你可能能够在服务器上实现业务逻辑。你可能能够格式化 API 输出的数据，以便将其顺利地放入 amp-mustache 模板中。amp-list 在这种情况下非常合适。

amp-bind 还提供了一种直接的机制，用于在 AMP 组件之间进行通信。在此示例中，点击 <amp-selector> 中的图像会将状态变量 selectedSlide 设置为 0，进而使 <amp-carousel> 移动到其第一张幻灯片。

<amp-carousel slide="selectedSlide">
...
</amp-carousel>

<amp-selector>
  <amp-img on="tap:AMP.setState({selectedSlide: 0})"/>
</amp-selector>

传统的交互式 AMP 组件也可能更适合跨越网页大范围部分的交互——因为你可能不想将 DOM 的很大一部分包装在 <amp-script> 中。amp-list 和 amp-bind 与 AMP 的其余部分紧密集成，使其可以在网页上的任何地方方便地使用绑定。

但是，在涉及更复杂的状态变量或多个交互的页面上，使用 amp-script 将产生更简单、更易于维护的代码。请看来自 AMP Camp 电子商务演示网站的此示例

<amp-selector
  name="color"
  layout="container"
  [selected]="product.selectedColor"
  on="select:AMP.setState({
      product: 
        {
          selectedSlide: product[event.targetOption].option - 1,
          selectedColor: event.targetOption,
          selectedSize: product[event.targetOption].sizes[product.selectedSize] != null ?
                        product.selectedSize : 
                        product[event.targetOption].defaultSize,
          selectedQuantity: 1
        }
      })"
></amp-selector>

此演示是在 amp-script 发布之前创建的。但在 JavaScript 中编写和调试此类逻辑会更容易。对于包含更多业务逻辑的页面，使用 amp-script 将使你避免混淆并遵循更好的编程实践。

在许多情况下，你将希望在同一页面上同时使用 amp-script 和 amp-bind。为更简单的交互部署 amp-bind，在需要更多逻辑或结构时转向 amp-script。此外，尽管 amp-script 只能对其 DOM 子级进行修改，如上所述，但它可以通过修改状态变量来影响页面的其余部分。amp-bind 完成其余工作，如此示例中所示。

尽管 WorkerDOM 会在你的代码更改其可访问的虚拟 DOM 时更改真实的 DOM，但不存在用于反向同步的机制。因此，不建议使用 amp-bind 或其他方法来修改 <amp-script> 的子级。将页面的该区域保留给你的 amp-script JavaScript。

为 `amp-script` 做出贡献

amp-script 始终在不断发展，就像 AMP 一样。你可以通过参与来帮助改进它。考虑其他开发人员可能也需要的新功能，提交问题，当然还有建议并贡献新功能！

由 @morss 撰写
由 @CrystalOnScript 和 @fstanis 贡献