使用 Google Apps Script/模板化 HTML 開發 Web 應用

將變數放入 HTML 頁面

如Hello World 章節中所述，您可以透過建立一個 HTML 頁面並將其用作模板來建立基礎。通常，您需要使用來自伺服器的資訊（例如，通常是您的 Google 表格之一）來定製該頁面。您可以使用各種模板工具來實現這一點。

您可以使用t.coolvariable="whatever"將變數傳送到模板，並使用<?= coolvariable ?>將其放入 HTML 文件中。

doGet 程式碼

來自“code.gs”

function doGet() {
   var t = HtmlService.createTemplateFromFile("main");
   t.coolvariable = "hi there";
   return t.evaluate();
   }

HTML 程式碼

來自“main.html”

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <?= coolvariable ?>
  </body>
</html>

Web 結果

您好

更復雜的變數

如果您想傳送比字串更復雜的內容，則有一些選擇

<?!= somevariable ?>將列印包含特殊字元的內容。例如，這對於包含 HTML 標籤的字串很有用。
var pagevariable = <?!= JSON.stringify(somevariable) ?>;在 HTML 頁面上的<script>標籤內，然後允許本地 JavaScript 將其作為全域性變數處理。
如果您有一堆變數希望作為 HTML 文件中的全域性變數
- 在 code.gs 文件中使用t.globals={"var1":var1, "var2":var2};
- ```
var globals = <?!= JSON.stringify(globals) ?>;
Object.keys(globals).forEach(key=>window[key]=globals[key]);
```
- 這之所以有效，是因為window物件是 HTML 文件的全域性“名稱空間”。這僅僅意味著它是全域性變數所在的位置。

傳遞函式

當檢查嵌入在 HTML 檔案中的 JavaScript 程式碼的語法錯誤時，Google Apps Script 編輯器無法很好地工作。以下是一個技巧，可以讓您在伺服器程式碼空間中編寫 JavaScript 函式（這允許對其進行語法檢查），然後將其傳遞給客戶端。訣竅是使用函式表示式。

在伺服器端，您將執行此操作

function doGet() {
  var t=HtmlService.createTemplateFromFile("main");
  t.funcs=[a,b,temp];
  t.funcnames=t.funcs.map(f=>f.name);
  return t.evaluate();
}

var a=(c,d)=>c+d;
var b=(e,f)=>e*f;
var temp=(a,b,c)=>{
                    var d=a+b;
                    var e=b*c;
                    return d+e;
                   }

在客戶端 HTML 檔案中，您將執行此操作

var funcnames=<?!= JSON.stringify(funcnames) ?>;
var funcs=[<?!= funcs ?>];
funcnames.forEach((fn,i)=>window[fn]=funcs[i]);