在 AMP 頁面中使用自訂 JavaScript

amp-script 可讓您撰寫和執行自己的 JavaScript，同時維持 AMP 的效能保證。大多數 AMP 元件透過自身的邏輯啟用常見的網路互動方式，讓您無需撰寫 JavaScript 或匯入第三方程式庫，即可快速建構頁面。透過使用 amp-script，您可以針對特定使用案例或獨特需求採用自訂邏輯，同時保有 AMP 的優點。

本指南提供此元件的背景資訊，以及其使用的最佳實務。

Web workers (網頁工作站)

過多的 JavaScript 可能會使網站速度變慢且反應遲鈍。為了控制 AMP 頁面載入的 JavaScript 及其執行時間，AMP 的驗證規則禁止開發人員透過 <script> 標記在網頁中執行 JavaScript。

Web workers (網頁工作站) 提供更安全地執行 JavaScript 的方法。一般來說，所有 JavaScript 都在單一執行緒中執行，但每個 worker (工作站) 都在自己的執行緒中執行。之所以可行，是因為它們無法存取 DOM 或 window 物件，而且每個 worker (工作站) 都在自己的全域範圍中執行。因此，它們不會互相干擾工作，也不會干擾主要執行緒中程式碼造成的變動。它們只能透過包含物件的訊息與主要執行緒及彼此通訊。Workers (工作站) 提供通往多執行緒網路的路徑，這是一種將 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 將少數同步 DOM API 方法替換為傳回 Promise 的替代方法。例如，您可以使用 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 元件無法實現的互動方式，為網路的完整創造力開啟大門。

話雖如此，在轉向使用 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 負責其餘部分，如此範例所示。

雖然當您的程式碼變更它有權存取的虛擬 DOM 時，WorkerDOM 會變更真實 DOM，但沒有機制可以反向同步。因此，不建議使用 amp-bind 或其他方式來修改 <amp-script> 的子項。請將頁面的該區域保留給您的 amp-script JavaScript。

為 `amp-script` 貢獻

amp-script 始終在不斷發展，就像 AMP 一樣。您可以透過參與來協助改進它。思考其他開發人員可能也需要的新功能、提交問題，當然還有建議並貢獻新功能！

由 @morss 撰寫
並由 @CrystalOnScript 和 @fstanis 貢獻