HTML 服务：最佳实践

使用 HTML 服务构建界面与标准 Web 开发类似。不过，某些方面是 Apps 脚本环境特有的。本指南重点介绍了开发响应式且安全的 HTML 服务界面的最佳实践。

将 HTML、CSS 和 JavaScript 分开

将所有 HTML、CSS 和 JavaScript 合并到一个文件中可能会导致项目难以维护。虽然 Apps 脚本要求客户端代码位于 .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 可用于快速 构建界面，但应限制其使用，以确保界面具有 响应能力。模板中的代码会在页面加载时执行一次，并且在处理完成之前不会向客户端发送任何内容。在脚本代码中执行长时间运行的任务可能会导致界面显示缓慢。

使用脚本标记执行快速的一次性任务，例如包含其他内容或设置静态值。所有其他数据都应使用 google.script.run 调用加载。 以这种异步方式进行编码更加困难，但可以使界面加载速度更快，并有机会向用户显示微调框或其他加载消息。

不要在模板中加载

<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 沙盒模式下， 所有 JavaScript 和 CSS 文件都必须通过 HTTPS 提供。以不安全的方式提供这些文件会导致出现如下错误：

混合内容：系统通过 HTTPS 加载了“https://...”处的网页，但 请求了不安全的脚本“http://...”。此请求已被屏蔽；内容必须通过 > HTTPS 提供。

大多数热门库都支持 HTTP 和 HTTPS，因此切换通常只需在网址中插入一个额外的“s”即可。

使用 HTML5 文档类型声明

如果您的网页是使用较新的 IFRAME 沙盒模式提供的，请务必 在 HTML 文件的顶部添加以下代码段。

<!DOCTYPE html>

此文档类型声明会告知浏览器，您设计的网页适用于 现代浏览器，并且不应使用 Quirks 模式呈现您的网页。即使您不打算利用现代 HTML5 元素或 JavaScript API，这也有助于确保您的网页正确显示。

最后加载 JavaScript

许多 Web 开发者建议在页面底部加载 JavaScript 代码以提高响应能力，这对于 HTML 服务来说更为重要。将 <script> 标记移到页面末尾可让 HTML 内容在 JavaScript 处理之前呈现，从而让您能够向用户显示 微调框或其他消息。

利用 jQuery

jQuery 是一个热门的 JavaScript 库，可简化 Web 开发中的许多常见任务。