本頁面由 Cloud Translation API 翻譯而成。

HTML Service：最佳做法

使用 HTML 服務建立使用者介面時，會遵循許多與其他類型網頁開發相同的模式和做法。不過，有些部分是 Apps Script 環境特有，或值得特別強調。以下將介紹在開發自有 HTML 服務 UI 時，應留意的最佳做法。

分開 HTML、CSS 和 JavaScript

將所有 HTML、CSS 和 JavaScript 程式碼放在單一檔案中，可能會讓專案難以閱讀及開發。雖然 Apps Script 要求將用戶端程式碼放在 .html 檔案中，但您仍可將 CSS 和用戶端 JavaScript 分開至不同的檔案，然後透過自訂函式將這些檔案納入主要 HTML 頁面。

以下範例在 Code.gs 檔案中定義自訂的伺服器端 include() 函式，用於將 Stylesheet.html 和 JavaScript.html 檔案內容匯入 Page.html 檔案。使用列印指令碼呼叫時，這個函式會將指定的檔案內容匯入目前的檔案。請注意，因為附加檔案是 HTML 程式碼片段，而非純粹的 .css 或 .js 檔案，因此會包含 <style> 和 <script> 標記。

Code.gs

function doGet(request) {
  return HtmlService.createTemplateFromFile('Page')
      .evaluate();
}

function include(filename) {
  return HtmlService.createHtmlOutputFromFile(filename)
      .getContent();
}

Page.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <?!= include('Stylesheet'); ?>
  </head>
  <body>
    <h1>Welcome</h1>
    <p>Please enjoy this helpful script.</p>
    <?!= include('JavaScript'); ?>
  </body>
</html>

Stylesheet.html

<style>
p {
  color: green;
}
</style>

JavaScript.html

<script>
window.addEventListener('load', function() {
  console.log('Page is loaded');
});
</script>

非同步載入資料，而非在範本中載入

HTML 範本可用於快速建構簡單的介面，但應限制使用範本，以確保 UI 能回應使用者操作。範本中的程式碼會在網頁載入時執行一次，且在處理完成前不會傳送任何內容給用戶端。如果在 SCRIPTLET 程式碼中執行長時間運作的作業，可能會導致 UI 速度變慢。

請使用指令碼片段標記，用於快速執行一次性任務，例如加入其他內容或設定靜態值。所有其他資料都應使用 google.script.run 呼叫載入。以這種非同步方式編寫程式雖然較為困難，但可讓 UI 載入速度加快，並有機會向使用者顯示旋轉圖示或其他載入訊息。

不要：在範本中載入

<p>List of things:</p>
<? var things = getLotsOfThings(); ?>
<ul>
  <? for (var i = 0; i < things.length; i++) { ?>
    <li><?= things[i] ?></li>
  <? } ?>
</ul>

Do：非同步載入

<p>List of things:</p>
<ul id="things">
    <li>Loading...</li>
</ul>

<script
src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
// The code in this function runs when the page is loaded.
$(function() {
  google.script.run.withSuccessHandler(showThings)
      .getLotsOfThings();
});

function showThings(things) {
  var list = $('#things');
  list.empty();
  for (var i = 0; i < things.length; i++) {
    list.append('<li>' + things[i] + '</li>');
  }
}
</script>

使用 HTTPS 載入資源

如果網頁是使用較新的 IFRAME 沙箱模式提供服務，包括未透過 HTTPS 提供的 JavaScript 或 CSS 檔案，都會導致下列錯誤。

複合型內容：系統透過 HTTPS 載入「https://...」頁面，但要求不安全的指令碼「http://...」。這項要求已遭到封鎖，內容必須透過 HTTPS 提供。

大多數熱門程式庫都支援 HTTP 和 HTTPS，因此切換時通常只需在網址中插入額外的「s」即可。

使用 HTML5 文件類型宣告

如果網頁是使用較新的 IFRAME 沙箱模式提供服務，請務必在 HTML 檔案頂端加入以下程式碼片段。

<!DOCTYPE html>

這個文件類型宣告會告訴瀏覽器，您是為新式瀏覽器設計網頁，因此不應使用相容模式轉譯網頁。即使您不打算使用新式 HTML5 元素或 JavaScript API，這麼做也有助於確保網頁正確顯示。

最後載入 JavaScript

許多網頁開發人員建議在網頁底部載入 JavaScript 程式碼，以提高回應速度，而這對 HTML 服務來說更是重要。將 <script> 標記移至網頁結尾，即可在處理 JavaScript 之前轉譯 HTML 內容，讓您向使用者顯示旋轉圖示或其他訊息。

善用 jQuery

jQuery 是熱門的 JavaScript 程式庫，可簡化網頁開發中的許多常見工作。