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 giống nhau và thực tiễn như các loại phát triển web khác. Tuy nhiên, có một số khía cạnh dành riêng cho môi trường Apps Script hoặc có giá trị đánh dấu. 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 dịch vụ HTML của riêng bạn.

Phân tách HTML, CSS và JavaScript

Việc giữ tất cả mã HTML, CSS và JavaScript trong một tệp có thể giúp dự án của bạn khó đọc và khó phát triển. Mặc dù Apps Script yêu cầu mã phía máy khách được đặt trong tệp .html, bạn vẫn có thể tách riêng CSS và phía máy khách của mình JavaScript vào các tệp khác nhau rồi đưa chúng vào trang HTML chính bằng hàm tùy chỉnh.

Ví dụ bên dưới định nghĩa một hàm include() tuỳ chỉnh phía máy chủ trong Code.gs để nhập nội dung tệp biểu định kiểu.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 nhập nội dung tệp được chỉ định vào tệp hiện tại. Lưu ý các tệp được bao gồm chứa thẻ <style> và <script> vì chúng là đoạn mã HTML chứ không phải là các 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

HTML theo mẫu có thể được sử dụng để nhanh chóng xây dựng các giao diện đơn giản, nhưng nên sử dụng giới hạn để đảm bảo giao diện người dùng thích ứng. 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 máy khách cho đến khi quá trình xử lý hoàn tất. Có được các tác vụ chạy trong thời gian dài trong mã tập lệnh có thể khiến giao diện người dùng hoạt động chậm.

Dùng thẻ tập lệnh cho các tác vụ nhanh, thực hiện một lần, chẳng hạn như thêm nội dung khác hoặc đặt giá trị cố định. Tất cả dữ liệu khác phải được tải bằng google.script.run cuộc gọi. Việc lập trình theo cách không đồng bộ này sẽ khó khăn hơn nhưng cho phép giao diện người dùng tải nhanh hơn và tạo cơ hội để giới thiệu một vòng quay hoặc đang tải thông báo 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 mới chế độ hộp cát, bao gồm Tệp JavaScript hoặc CSS không được phân phát thông qua HTTPS sẽ dẫn đến các lỗi như một số ở 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 được thực hiện chỉ cần chèn thêm 's' vào URL.

Sử dụng phần khai báo loại tài liệu HTML5

Nếu trang của bạn được phân phát bằng IFRAME mới chế độ hộp cát, hãy đảm bảo để thêm đoạn mã sau đây vào đầu tệp HTML.

<!DOCTYPE html>

Loại tài liệu này loại tài liệu này cho trình duyệt biết rằng bạn đã thiết kế trang web các trình duyệt hiện đại và trình duyệt đó không hiển thị trang của bạn bằng cách sử dụng chế độ tương thích ngược. Ngay cả khi bạn không lập kế hoạch để 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 được 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 và điều này thậm chí còn quan trọng hơn với HTML . Việc di chuyển thẻ <script> đến cuối trang sẽ cho phép HTML nội dung hiển thị trước khi JavaScript được xử lý, cho phép bạn trình bày 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 thao tác phổ biến trong quá trình phát triển web.