Trang này được dịch bởi Cloud Translation API.

Dịch vụ HTML: Các phương pháp hay nhất

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ỉ dành riêng cho môi trường Apps Script hoặc đáng được làm nổi bật. Dưới đây, chúng tôi sẽ đề cập đến một số phương pháp hay nhất mà bạn nên lưu ý khi phát triển giao diện người dùng cho dịch vụ HTML của riêng mình.

Tách riêng HTML, CSS và JavaScript

Việc lưu trữ 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 đặt mã phía máy khách vào 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 khác nhau, 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() phía máy chủ tuỳ chỉnh 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 tập lệnh in, hàm này sẽ nhập nội dung tệp đã chỉ định vào tệp hiện tại. Lưu ý rằng các tệp đi kèm chứa thẻ <style> và <script> vì đó 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 phải trong mẫu

Bạn có thể sử dụng HTML mẫu để nhanh chóng tạo giao diện đơn giản, nhưng bạn chỉ nên sử dụng HTML mẫu để đảm bảo giao diện người dùng phản hồi nhanh. Mã trong 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 ứng dụng 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ã tập lệnh nhỏ có thể khiến giao diện người dùng của bạn có vẻ chậm.

Sử dụng thẻ tập lệnh nhỏ cho các tác vụ nhanh, một lần, chẳng hạn như đưa nội dung khác vào 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 lập trình theo cách không đồng bộ này 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 hiển thị một vòng quay hoặc thông báo tải khác cho người dùng.

Không nên – tải vào 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 IFRAME chế độ hộp cát mới, bao gồm cả 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ư một lỗi dưới đây.

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à chèn thêm một "s" vào URL.

Sử dụng nội dung 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ớ đưa đoạn mã sau vào đầu tệp HTML.

<!DOCTYPE html>

Nội dung 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 hiển thị trang của bạn bằng chế độ tương thích ngược. Ngay cả khi bạn không có kế hoạch tận dụng các phần tử HTML5 hiện đại hoặc API JavaScript, việc này vẫn 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 khuyên bạn nên tải mã JavaScript ở cuối trang để tăng khả năng phản hồi, điều này càng quan trọng hơn với dịch vụ HTML. Việc di chuyển thẻ <script> xuống cuối trang sẽ cho phép nội dung HTML hiển thị trước khi JavaScript được xử lý, cho phép bạn hiển thị một trình đơn vòng quay 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.