在 AMP 页面中使用自定义 JavaScript

重要提示：此文档不适用于您当前选择的格式广告！

amp-script 允许您编写和运行自己的 JavaScript，同时保持 AMP 的性能保证。大多数 AMP 组件通过它们自己的逻辑启用常见的 Web 交互，让您无需编写 JavaScript 或导入第三方库即可快速构建页面。通过使用 amp-script，您可以在不损失 AMP 优势的情况下，为特定用例或独特需求采用自定义逻辑。

本指南提供了有关此组件的背景知识及其使用最佳实践。

Web workers

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

Web workers 提供了一种更安全地运行 JavaScript 的方法。通常，所有 JavaScript 都在单个线程中运行，但是每个 worker 都在自己的线程中运行。这是可能的，因为它们无法访问 DOM 或 window 对象，并且每个 worker 都在自己的全局范围内运行。因此，它们不会相互干扰，也不会干扰主线程中代码引起的突变。它们只能通过包含对象的消息与主线程和彼此通信。Workers 为多线程 Web 提供了一条路径，一种将 JavaScript 封装在沙箱中的方法，在沙箱中它不会阻塞 UI。

Workers 不会访问 DOM。为了弥补这一差距，AMP 团队创建了一个名为 WorkerDOM 的开源库。WorkerDOM 将 DOM 复制到虚拟 DOM，并使该副本可供 worker 使用。WorkerDOM 还重新创建了标准 DOM API 的子集。当 worker 对虚拟 DOM 进行更改时，WorkerDOM 会在真实 DOM 中重新创建这些更改。这使 worker 可以使用标准技术操作 DOM 并在页面上进行更改。DOM 同步仅沿一个方向进行。如果主线程修改了 DOM，则没有机制可以让 worker 知道。

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

`amp-script` 概述

JavaScript 语言在 worker 中与其他浏览器中的位置相同。因此，在 amp-script 中，您可以使用 JavaScript 提供的所有常用结构。WorkerDOM 还重新创建了许多常用的 DOM API，并使其可供您使用。它支持常见的 Web API，如 Fetch 和 Canvas，并为您提供选定的全局对象，如 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 来利用 Web API 和 DOM API 中 AMP 组件目前无法访问的区域，或者以 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 一样，amp-script 也在不断发展。您可以通过参与来帮助改进它。考虑其他开发人员可能也需要的新功能，提交问题，当然，还有建议并贡献新功能！

作者： @morss
贡献者： @CrystalOnScript 和 @fstanis