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;

Kod HTML oparty na szablonie można wykorzystać do szybkiego tworzenia prostych interfejsów, ale jego użycie powinno być ograniczone, aby zapewnić elastyczność 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ć, że interfejs użytkownika będzie działać wolniej.

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 – wczytuj 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 – ładowanie 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 w nowszym IFRAME trybie piaskownicy, w tym pliki JavaScript lub CSS, które nie są obsługiwane przez HTTPS, będą powodować błędy podobne do tego poniżej.

Treści mieszane: strona „https://…” została załadowana przy użyciu protokołu HTTPS, ale zażądała niezabezpieczonego skryptu „http://…”. To żądanie zostało zablokowane, ponieważ 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żyj deklaracji typu dokumentu HTML5

Jeśli Twoja strona jest wyświetlana w nowszym trybie piaskownicy IFRAME, pamiętaj, by na początku pliku HTML umieścić ten fragment kodu.

<!DOCTYPE html>

Deklaracja tego typu dokumentu informuje przeglądarkę, że strona została zaprojektowana pod kątem nowoczesnych przeglądarek i nie powinna renderować strony 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.

Załaduj JavaScript jako ostatni

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.