Halaman ini diterjemahkan oleh Cloud Translation API.

Layanan HTML: Praktik Terbaik

Pembuatan antarmuka pengguna dengan layanan HTML mengikuti banyak pola yang sama yang berbeda dengan jenis pengembangan web lainnya. Namun, ada beberapa aspek yang unik bagi lingkungan Apps Script atau bernilai menyoroti. Di bawah ini kami akan membahas beberapa praktik terbaik yang harus Anda ingat saat mengembangkan UI layanan HTML Anda sendiri.

HTML, CSS, dan JavaScript yang terpisah

Menyimpan semua kode HTML, CSS, dan JavaScript dalam satu file dapat membuat proyek Anda sulit untuk dibaca dan dikembangkan. Meskipun Apps Script memerlukan kode sisi klien ditempatkan dalam file .html, Anda tetap dapat memisahkan CSS dan sisi klien JavaScript ke dalam file yang berbeda, kemudian sertakan dalam halaman HTML utama dengan fungsi kustom.

Contoh di bawah menentukan fungsi include() sisi server kustom dalam {i>File<i} Code.gs untuk mengimpor isi file Stylesheet.html dan JavaScript.html ke dalam file Page.html. Saat dipanggil menggunakan mencetak skriplet, fungsi ini mengimpor isi file yang ditentukan ke dalam file saat ini. Pemberitahuan bahwa file yang disertakan berisi tag <style> dan <script> karena itu cuplikan HTML dan bukan file .css atau .js murni.

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>

Memuat data secara asinkron, bukan dalam template

HTML template dapat digunakan dengan cepat membangun antarmuka sederhana, tetapi penggunaannya harus dibatasi untuk memastikan UI responsif. Kode dalam template dieksekusi sekali ketika halaman dimuat, dan tidak ada konten yang dikirim ke klien hingga pemrosesan selesai. Memiliki tugas yang berjalan lama dalam kode skrip dapat menyebabkan UI Anda tampak lambat.

Gunakan tag skriplet untuk tugas satu kali singkat seperti menyertakan konten lainnya atau menetapkan nilai statis. Semua data lainnya harus dimuat menggunakan Panggilan google.script.run. Pengkodean dengan cara asinkron ini lebih sulit, tetapi memungkinkan UI untuk dimuat dengan lebih cepat dan memberikan kesempatan untuk menampilkan indikator lingkaran berputar memuat pesan ke pengguna.

Jangan — muat template

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

Lakukan — muat secara asinkron

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

Memuat resource menggunakan HTTPS

Jika halaman Anda ditayangkan menggunakan IFRAME yang lebih baru mode sandbox, termasuk File JavaScript atau CSS yang tidak ditayangkan menggunakan HTTPS akan menghasilkan error seperti satu di bawah ini.

Konten Campuran: Halaman di 'https://...' dimuat melalui HTTPS, namun meminta skrip yang tidak aman 'http://...'. Permintaan ini telah diblokir; konten harus ditayangkan melalui HTTPS.

Library paling populer mendukung HTTP dan HTTPS, jadi peralihan biasanya hanya dengan memasukkan penambahan 's' ke URL.

Menggunakan deklarasi jenis dokumen HTML5

Jika halaman Anda ditayangkan menggunakan IFRAME yang lebih baru mode sandbox, pastikan untuk menyertakan cuplikan kode berikut di bagian atas file HTML Anda.

<!DOCTYPE html>

Deklarasi jenis dokumen ini memberi tahu browser bahwa Anda mendesain halaman untuk browser modern, dan seharusnya tidak merender laman menggunakan quirks mode. Bahkan jika Anda tidak merencanakan untuk memanfaatkan elemen HTML5 modern atau JavaScript API, hal ini akan membantu memastikan halaman Anda ditampilkan dengan benar.

Muat JavaScript terakhir

Banyak developer web merekomendasikan untuk memuat kode JavaScript di bagian bawah halaman untuk meningkatkan responsivitas, dan ini bahkan lebih penting dengan HTML layanan. Memindahkan tag <script> ke akhir halaman akan memungkinkan HTML konten yang dirender sebelum JavaScript diproses, memungkinkan Anda untuk menampilkan indikator lingkaran berputar atau pesan lain kepada pengguna.

Memanfaatkan jQuery

jQuery adalah library JavaScript populer yang menyederhanakan banyak tugas umum dalam pengembangan web.