使用 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]);