Việc tạo giao diện người dùng bằng dịch vụ HTML tuân theo nhiều mẫu và phương pháp tương tự như các loại hình phát triển web khác. Tuy nhiên, có một số khía cạnh chỉ có trong môi trường Apps Script hoặc đáng được làm nổi bật. Dưới đây, chúng ta sẽ đề cập đến một số phương pháp hay nhất mà bạn nên ghi nhớ khi phát triển giao diện người dùng dịch vụ HTML của riêng mình.
Tách HTML, CSS và JavaScript
Việc lưu giữ tất cả mã HTML, CSS và JavaScript trong một tệp có thể khiến dự án của bạn khó đọc và phát triển. Mặc dù Apps Script yêu cầu mã phía máy khách phải được đặt trong các tệp .html, nhưng bạn vẫn có thể tách CSS và JavaScript phía máy khách thành các tệp riêng biệt, sau đó đưa các tệp đó vào trang HTML chính bằng một hàm tuỳ chỉnh.
Ví dụ bên dưới xác định một hàm include() tuỳ chỉnh phía máy chủ trong tệp Code.gs để nhập nội dung tệp Stylesheet.html và JavaScript.html vào tệp Page.html. Khi được gọi bằng printing scriptlets (tập lệnh in), hàm này sẽ nhập nội dung tệp được chỉ định vào tệp hiện tại. Xin lưu ý rằng các tệp được đưa vào có chứa thẻ <style> và <script> vì chúng là các đoạn mã HTML chứ không phải tệp .css hoặc .js thuần tuý.
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>Tải dữ liệu không đồng bộ, không tải trong các mẫu
Bạn có thể dùng HTML dựa trên mẫu để nhanh chóng tạo các giao diện đơn giản, nhưng bạn nên hạn chế sử dụng để đảm bảo giao diện người dùng của bạn có khả năng phản hồi. Mã trong các mẫu được thực thi một lần khi trang được tải và không có nội dung nào được gửi đến máy khách cho đến khi quá trình xử lý hoàn tất. Việc có các tác vụ chạy trong thời gian dài trong mã scriptlet có thể khiến giao diện người dùng của bạn xuất hiện chậm.
Sử dụng thẻ scriptlet cho các tác vụ nhanh, một lần, chẳng hạn như bao gồm nội dung khác hoặc đặt giá trị tĩnh. Tất cả dữ liệu khác phải được tải bằng các lệnh gọi google.script.run.
Việc viết mã theo cách không đồng bộ này sẽ khó hơn nhưng cho phép giao diện người dùng tải nhanh hơn và có cơ hội trình bày một chỉ báo xoay hoặc thông báo tải khác cho người dùng.
Không – tải trong mẫu
<p>List of things:</p>
<? var things = getLotsOfThings(); ?>
<ul>
<? for (var i = 0; i < things.length; i++) { ?>
<li><?= things[i] ?></li>
<? } ?>
</ul>Nên – tải không đồng bộ
<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>Tải tài nguyên bằng HTTPS
Nếu trang của bạn được phân phát bằng chế độ hộp cát IFRAME mới hơn, thì việc đưa các tệp JavaScript hoặc CSS không được phân phát bằng HTTPS sẽ dẫn đến các lỗi như lỗi bên dưới.
Nội dung hỗn hợp: Trang tại "https://..." được tải qua HTTPS, nhưng đã yêu cầu một tập lệnh không an toàn "http://...". Yêu cầu này đã bị chặn; nội dung phải được phân phát qua HTTPS.
Hầu hết các thư viện phổ biến đều hỗ trợ cả HTTP và HTTPS, vì vậy, việc chuyển đổi thường chỉ là vấn đề chèn thêm "s" vào URL.
Sử dụng khai báo loại tài liệu HTML5
Nếu trang của bạn được phân phát bằng chế độ hộp cát IFRAME mới hơn, hãy nhớ thêm đoạn mã sau vào đầu tệp HTML.
<!DOCTYPE html>
Khai báo loại tài liệu này cho trình duyệt biết rằng bạn đã thiết kế trang cho các trình duyệt hiện đại và trình duyệt không nên kết xuất trang của bạn bằng chế độ tương thích ngược. Ngay cả khi bạn không có ý định tận dụng các phần tử HTML5 hiện đại hoặc API JavaScript, điều này sẽ giúp đảm bảo trang của bạn hiển thị chính xác.
Tải JavaScript sau cùng
Nhiều nhà phát triển web đề xuất tải mã JavaScript ở cuối trang để tăng khả năng phản hồi và điều này thậm chí còn quan trọng hơn với dịch vụ HTML. Việc di chuyển thẻ <script> đến cuối trang sẽ cho phép nội dung HTML kết xuất trước khi JavaScript được xử lý, cho phép bạn trình bày một biểu tượng xoay hoặc thông báo khác cho người dùng.
Tận dụng jQuery
jQuery là một thư viện JavaScript phổ biến giúp đơn giản hoá nhiều tác vụ phổ biến trong quá trình phát triển web.