Ta strona została przetłumaczona przez Cloud Translation API.

Usługa HTML: sprawdzone metody

Tworzenie interfejsów użytkownika za pomocą usługi HTML odbywa się według tych samych wzorców i praktyk co w przypadku innych typów tworzenia stron internetowych. Niektóre aspekty są jednak charakterystyczne dla środowiska Apps Script lub na tyle ważne, że warto je wyróżnić. Poniżej przedstawiamy sprawdzone metody, które warto wziąć pod uwagę podczas tworzenia własnych interfejsów usług HTML.

oddzielnie kod HTML, CSS i JavaScript;

Przechowywanie całego kodu HTML, CSS i JavaScript w jednym pliku może utrudniać odczytywanie i rozwijanie projektu. Chociaż kod po stronie klienta musi być umieszczony w plikach HTML, możesz rozdzielić kod CSS i JavaScript po stronie klienta na różne pliki, a następnie umieścić je na głównej stronie HTML za pomocą funkcji niestandardowej.

Przykład poniżej definiuje niestandardową funkcję include() po stronie serwera w pliku Code.gs, aby zaimportować zawartość plików Stylesheet.html i JavaScript.html do pliku Page.html. Gdy jest wywoływana za pomocą skrypletów do drukowania, ta funkcja importuje określony plik do bieżącego pliku. Pamiętaj, że zawarte pliki zawierają tagi <style> i <script>, ponieważ są to fragmenty kodu HTML, a nie zwykłe pliki .css ani .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>

wczytywać dane asynchronicznie, a nie w ramach szablonów;

Szablony HTML można używać do szybkiego tworzenia prostych interfejsów, ale należy ograniczyć ich stosowanie, aby zapewnić responsywność interfejsu. Kod w szablonach jest wykonywany raz po załadowaniu strony, a do momentu zakończenia przetwarzania nie jest wysyłana do klienta żadna treść. Długotrwałe zadania w kodzie skryptu mogą powodować spowolnienie interfejsu.

Tagi skryptu używaj do szybkich, jednorazowych zadań, takich jak dodawanie innych treści lub ustawianie wartości statycznych. Wszystkie inne dane należy wczytywać za pomocą wywołań google.script.run. Programowanie w ten asynchroniczny sposób jest trudniejsze, ale pozwala szybciej wczytywać interfejs użytkownika i umożliwia wyświetlenie użytkownikowi wskaźnika postępu lub innej wiadomości o ładowaniu.

Nie – wczytywanie w szablonach

<p>List of things:</p>
<? var things = getLotsOfThings(); ?>
<ul>
  <? for (var i = 0; i < things.length; i++) { ?>
    <li><?= things[i] ?></li>
  <? } ?>
</ul>

Do – wczytywanie asynchroniczne

<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>

Ładowanie zasobów za pomocą protokołu HTTPS

Jeśli Twoja strona jest wyświetlana przy użyciu nowszego IFRAME trybu piaskownicy, a pliki JavaScript lub CSS nie są wyświetlane przy użyciu protokołu HTTPS, wystąpią błędy takie jak ten poniżej.

Treści mieszane: strona „https://...' została załadowana przez HTTPS, ale poprosiła o niezabezpieczony skrypt „http://...'. To żądanie zostało zablokowane. Treści muszą być udostępniane przez protokół HTTPS.

Większość popularnych bibliotek obsługuje zarówno protokół HTTP, jak i HTTPS, więc przełączenie się na ten drugi zwykle polega na dodaniu „s” do adresu URL.

Używanie deklaracji typu dokumentu HTML5

Jeśli strona jest wyświetlana za pomocą nowszego IFRAME trybu piaskownicy, pamiętaj, aby umieścić na początku pliku HTML poniższy fragment kodu.

<!DOCTYPE html>

Te deklaracje typu dokumentu informują przeglądarkę, że strona została zaprojektowana z myślą o nowoczesnych przeglądarkach i nie należy jej renderować w trybie osobliwości. Nawet jeśli nie zamierzasz korzystać z nowoczesnych elementów HTML5 ani interfejsów API JavaScript, warto zadbać o prawidłowe wyświetlanie strony.

Ładowanie JavaScriptu na końcu

Wielu programistów stron internetowych zaleca wczytywanie kodu JavaScript na dole strony, aby zwiększyć szybkość reakcji. Jest to jeszcze ważniejsze w przypadku usługi HTML. Przeniesienie tagów <script> na koniec strony spowoduje, że zawartość HTML zostanie zrenderowana przed przetworzeniem kodu JavaScript, co pozwoli Ci wyświetlić użytkownikowi Spinnera lub inną wiadomość.

Korzystanie z jQuery

jQuery to popularna biblioteka JavaScript, która upraszcza wiele typowych zadań związanych z tworzeniem stron internetowych.