Tworzenie interfejsów użytkownika za pomocą usługi HTML opiera się na wielu identycznych wzorcach i praktykami tak jak w przypadku innych rodzajów tworzenia stron internetowych. Istnieją jednak pewne aspekty które są unikalne dla środowiska Apps Script lub mają inną wartość podświetlania. Poniżej omówimy kilka sprawdzonych metod, o których warto pamiętać tworzenia własnych interfejsów użytkownika usługi HTML.
Oddzielny kod HTML, CSS i JavaScript
Przechowywanie wszystkich kodów HTML, CSS i JavaScript w jednym pliku są trudne do odczytania i rozwijania. Apps Script wymaga kodu po stronie klienta umieszczone w plikach .html, nadal możesz oddzielić CSS od strony klienta JavaScript do różnych plików, a następnie umieszczanie ich na głównej stronie HTML dzięki funkcji niestandardowej.
Poniższy przykład definiuje niestandardową funkcję include()
po stronie serwera w
Code.gs, aby zaimportować zawartość plików Stylesheet.html i JavaScript.html.
do pliku Page.html. W przypadku wywołania przy użyciu
drukowanie skryptów,
ta funkcja importuje określoną zawartość pliku do bieżącego pliku. Uwaga
że uwzględnione pliki zawierają tagi <style>
i <script>
, ponieważ
są to fragmenty kodu HTML, a nie czyste pliki CSS czy .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>
Ładuj dane asynchronicznie, nie w szablonach
HTML na podstawie szablonu: tworzysz proste interfejsy, ale jego użycie powinno być ograniczone, aby zapewnić responsywnych. Kod w szablonach jest wykonywany jednorazowo przy wczytywaniu strony. Żadne treści nie są wysyłane do klienta przed zakończeniem przetwarzania. Mając długotrwałe zadania w kodzie skryptu mogą powodować powolne działanie interfejsu użytkownika.
Używaj tagów scriptlet do szybkich, jednorazowych zadań, takich jak dodawanie innych treści
lub ustawienie wartości statycznych. Pozostałe dane powinny być wczytywane za pomocą
google.script.run
połączeń.
kodowanie w ten sposób asynchroniczny jest trudniejsze, ale umożliwia wczytanie interfejsu użytkownika.
szybciej i można zaprezentować wskaźnik postępu
wczytywania wiadomości do użytkownika.
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>
Wczytywanie zasobów przy użyciu protokołu HTTPS
Jeśli Twoja strona jest wyświetlana przy użyciu nowszej wersji IFRAME
tryb piaskownicy, w tym
Pliki JavaScript lub CSS, które nie są wyświetlane przy użyciu protokołu HTTPS, spowodują wystąpienie błędów takich jak
jeden poniżej.
Treść mieszana: strona pod adresem „https://...” została wczytana przez HTTPS, ale zażądał niezabezpieczonego skryptu „http://...”. To żądanie zostało zablokowane; treść musi być wyświetlana przez HTTPS.
Większość popularnych bibliotek obsługuje zarówno protokół HTTP, jak i HTTPS, więc przełączanie się wystarczy dodać element do adresu URL.
Użyj deklaracji typu dokumentu HTML5
Jeśli Twoja strona jest wyświetlana przy użyciu nowszej wersji IFRAME
trybie piaskownicy, upewnij się,
umieszczasz na początku pliku HTML następujący fragment kodu.
<!DOCTYPE html>
Deklaracja tego typu dokumentu informuje przeglądarkę, dla której strony zaprojektowano daną stronę i że nie powinien renderować strony za pomocą trybie osobliwości. Nawet jeśli nie planujesz wykorzystać nowoczesne elementy HTML5 lub interfejsy API JavaScript. upewnij się, że Twoja strona wyświetla się prawidłowo.
Załaduj JavaScript jako ostatni
Wielu programistów stron internetowych zaleca wczytywanie kodu JavaScript u dołu strony
jest większa responsywność. Jest to jeszcze ważniejsze w przypadku kodu HTML
posprzedażna. Przeniesienie tagów <script>
na koniec strony sprawi, że kod HTML
renderuje się przed przetworzeniem JavaScriptu, dzięki czemu można pokazać
wskaźnik postępu lub inną wiadomość do użytkownika.
Korzystanie z biblioteki jQuery
jQuery to popularna biblioteka JavaScript, która upraszcza w tworzeniu stron internetowych.