使用 HTML 服务创建界面时,应遵循许多与其他类型的 Web 开发的模式和做法相同的模式和做法。但是,有一些方面是 Apps 脚本环境所独有的,或者值得强调。下文将介绍您在开发自己的 HTML 服务界面时应注意的一些最佳实践。
为了便于演示这些最佳实践,我们使用名为简单任务的 HTML 服务创建了一个示例 Web 应用。我们的 GitHub 代码库提供了完整的源代码和设置说明。
单独的 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 可用于快速构建简单的界面,但应对其使用加以限制,以确保界面能够快速响应。模板中的代码会在页面加载时执行一次,在处理完成之前不会向客户端发送任何内容。在 scriptlet 代码中包含长时间运行的任务可能会导致界面看起来运行缓慢。
使用 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>
在简单任务示例应用中,HTML 服务页面 Page.html 以这种方式加载数据,并且仅使用模板将其他源代码添加到页面中。
使用 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 开发中的许多常见任务。