附錄

什麼是 JSON？

<amp-list>、<amp-bind> 和 <amp-state> 可以讀取 JSON 資料。JSON 是 JavaScript Object Notation 的縮寫。它是一種「輕量級資料交換格式」。即使它基於 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 和伺服器程式碼複製到您的本機解決方案中。