使用 HTML 服务创建界面遵循与其他类型 Web 开发相同的许多模式和做法。不过，有些方面是 Apps Script 环境所特有的，或者值得特别强调。下面，我们将介绍在开发自己的 HTML 服务界面时应牢记的一些最佳实践。
分离 HTML、CSS 和 JavaScript
将所有 HTML、CSS 和 JavaScript 代码保存在一个文件中可能会导致项目难以阅读和开发。虽然 Apps 脚本确实要求将客户端代码放置在 .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 可用于快速构建简单的界面，但应限制其使用，以确保界面能够快速响应。模板中的代码会在网页加载时执行一次，并且在处理完成之前不会向客户端发送任何内容。如果脚本代码中包含长时间运行的任务，可能会导致界面运行缓慢。
使用脚本标记执行快速的一次性任务，例如添加其他内容或设置静态值。所有其他数据都应使用 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
沙盒模式提供的，其中包含未使用 HTTPS 提供的 JavaScript 或 CSS 文件，则会导致以下错误。
混合内容：网址为“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 开发中的许多常见任务。