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 檔案。使用列印指令碼片段呼叫時，這個函式會將指定檔案內容匯入目前檔案。請注意，內含檔案含有 <style> 和 <script> 標記，因為這些是 HTML 程式碼片段，而非純 .css 或 .js 檔案。

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 具有回應性。範本中的程式碼會在網頁載入時執行一次，且在處理完成前，不會將任何內容傳送至用戶端。如果腳本程式碼中有長時間執行的工作，可能會導致 UI 顯示緩慢。

使用 scriptlet 標記執行快速的一次性工作，例如納入其他內容或設定靜態值。所有其他資料都應使用 google.script.run 呼叫載入。以這種非同步方式編碼較為困難，但可加快 UI 載入速度，並讓 UI 有機會向使用者顯示微調器或其他載入訊息。

不要 - 載入範本

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

正確做法：非同步載入

<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 程式庫，可簡化網頁開發中的許多常見工作。