附录

什么是 JSON？

<amp-list>、<amp-bind> 和 <amp-state> 可以读取 JSON 数据。JSON 是 JavaScript 对象表示法的缩写。它是一种“轻量级数据交换格式”。尽管它基于 JavaScript 的子集，但它是与语言无关的，这意味着所有语言都可以读取和理解它。JSON 数据通常以两种方式表示：要么是键（名称）和值对的集合，要么是值的有序列表（我们所知的列表或数组）。JSON 语法通常如下所示

{
    "people": {
        "number": 2,
        "names": ["Alice", "Bob"]
    }
}

如果您想要完整的规范，您可以查看官方文档。

什么是深合并？

我们解释了当调用 AMP.setState() 时，<amp-bind> 将“将提供的对象字面量与当前状态进行深合并”。深合并功能不会覆盖任何内容，而是会合并这两个对象。在 <amp-bind> 文档的示例中，我们看到只为员工提供年龄将只会更新状态中员工的年龄值。

<button on="tap:AMP.setState({
  employee: {
    name: 'John Smith',
    age: 47,
    vehicle: 'Car'
  }
})"...>
</button>
<button on="tap:AMP.setState({
  employee: {
    age: 64
  }
})"...>
</button>

按下第二个按钮后的结果会更新年龄

{
    employee: {
        name: 'John Smith',
        age: 64,
        vehicle: 'Car',
    }
}

如果 amp-bind 应用的是浅合并，则在按下第二个按钮后的结果将如下所示

{
    employee: {
        age: 64,
    }
}

浅拷贝只会更新整个结构。深合并会注意向状态中添加新元素，合并现有条目，而不是完全更新它们。

什么是 Glitch？

为了完成这些课程中包含的代码示例，我们将使用 Glitch。Glitch 是一个在线代码编辑器，允许您创建和查看网站和服务器 API，而无需在计算机上安装任何内容。

Glitch 代码编辑器环境如下所示

上面的红色框是您将输入 HTML 和 CSS 的在线编辑器。绿色框标记的按钮会将您带到您正在创建的页面的实时版本。黄色框是允许您创建此项目的副本并进行编辑的按钮。蓝色框表示您可用的文件。在 assets 文件夹中，您可以找到您的图像。

在这些课程中，您将需要各种图像来完成练习。您完成这些课程所需的所有图像都已添加到 Glitch 项目中。要查看项目中的图像，请单击 Glitch 编辑器左侧文件列表中的 assets 条目。要获取任何单个图像的链接，请从右侧的 assets 列表中选择图像，然后单击显示的弹出窗口中 URL 旁边的“复制”按钮。您可以在任何需要图像的地方使用该链接。

打开 此项目。单击右上角的“Remix This”按钮。这将创建一个您可以编辑的新项目。您可以继续使用此相同的编辑器进行本次和以后的培训。每个未来的教程都会让您有机会从该点的解决方案的参考版本开始。

不一定要使用 Glitch 来完成这些培训。但是，完成练习所需的一些代码在这些课程中没有讨论，而是包含在 Glitch 示例中。如果您想使用其他编辑器，您可能仍然需要进入 Glitch 示例，将 CSS 和服务器代码复制到本地解决方案中。