此页面由 Cloud Translation API 翻译。

HTML 服务：最佳实践

使用 HTML 服务创建界面遵循许多相同的模式与其他类型的 Web 开发一样。不过，也有一些方面是 Apps 脚本环境所独有的，突出显示。下面我们将介绍一些最佳实践开发自己的 HTML 服务界面。

单独的 HTML、CSS 和 JavaScript

将所有 HTML、CSS 和 JavaScript 代码保存在一个文件中可以使您的项目难以阅读和开发虽然 Apps 脚本确实需要客户端代码，置于 .html 文件中，您仍然可以将 CSS 和客户端将 JavaScript 嵌入不同的文件，然后将其添加到主 HTML 页面中自定义函数

以下示例定义了一个自定义服务器端 include() 函数，位于 Code.gs 文件，用于导入 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 可用于快速构建简单的接口，但应限制其使用，以确保您的界面响应式。模板中的代码在页面加载时执行一次，并且在处理完成之前，不会向客户端发送任何内容。拥有长时间运行的任务可能会导致界面运行缓慢。

使用 scriptlet 标记执行一次性快速任务，例如添加其他内容或设置静态价值所有其他数据应使用 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>

此文档类型声明用于告知浏览器，您将网页设计为现代浏览器，并且不应使用怪异模式。即使您没有计划充分利用现代 HTML5 元素或 JavaScript API，这将有助于确保您的网页能正确显示

最后一次加载 JavaScript

许多 Web 开发者建议在页面底部加载 JavaScript 代码提高响应速度，对于 HTML 代码，服务。将 <script> 标记移到网页的末尾处，可让 HTML 在 JavaScript 处理之前呈现内容，这让您可以旋转图标或其他消息。

利用 jQuery

jQuery是一个流行的 JavaScript 库 Web 开发中的许多常见任务。