หน้านี้ได้รับการแปลโดย Cloud Translation API

บริการ HTML: แนวทางปฏิบัติแนะนำ

การสร้างอินเทอร์เฟซผู้ใช้ด้วยบริการ HTML เป็นไปตามรูปแบบและแนวทางปฏิบัติเดียวกับการพัฒนาเว็บประเภทอื่นๆ หลายประการ อย่างไรก็ตาม ก็มีบางแง่มุมที่เฉพาะเจาะจงสำหรับสภาพแวดล้อม Apps Script หรือควรไฮไลต์ ด้านล่างนี้เราจะกล่าวถึงแนวทางปฏิบัติแนะนำบางประการที่คุณควรคำนึงถึงเมื่อพัฒนา UI บริการ HTML ของคุณเอง

แยก HTML, CSS และ JavaScript

การเก็บโค้ด HTML, CSS และ JavaScript ทั้งหมดไว้ในไฟล์เดียวอาจทําให้โปรเจ็กต์อ่านและพัฒนาได้ยาก แม้ว่า Apps Script จะกำหนดให้ต้องวางโค้ดฝั่งไคลเอ็นต์ในไฟล์ .html แต่คุณยังคงแยก CSS และ JavaScript ฝั่งไคลเอ็นต์ออกเป็นไฟล์ต่างๆ แล้วรวมไว้ในหน้า HTML หลักด้วยฟังก์ชันที่กำหนดเองได้

ตัวอย่างด้านล่างจะกำหนดฟังก์ชัน include() ฝั่งเซิร์ฟเวอร์ที่กำหนดเองในไฟล์ Code.gs เพื่อนำเข้าเนื้อหาของไฟล์ Stylesheet.html และ JavaScript.html ไปยังไฟล์ Page.html เมื่อเรียกใช้โดยใช้สคริปต์การพิมพ์ ฟังก์ชันนี้จะนำเข้าเนื้อหาไฟล์ที่ระบุลงในไฟล์ปัจจุบัน โปรดทราบว่าไฟล์ที่รวมอยู่มีแท็ก <style> และ <script> เนื่องจากเป็นข้อมูลโค้ด HTML ไม่ใช่ไฟล์ .css หรือ .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>

โหลดข้อมูลแบบไม่พร้อมกัน ไม่ใช่ในเทมเพลต

HTML เทมเพลตจะใช้ในการสร้างอินเทอร์เฟซที่เรียบง่ายได้อย่างรวดเร็ว แต่ควรจำกัดการใช้งานเพื่อให้มั่นใจว่า UI จะตอบสนองได้ดี ระบบจะเรียกใช้โค้ดในเทมเพลตเพียงครั้งเดียวเมื่อโหลดหน้าเว็บ และจะไม่ส่งเนื้อหาไปยังไคลเอ็นต์จนกว่าการประมวลผลจะเสร็จสมบูรณ์ การมีงานที่ทำงานเป็นเวลานานในโค้ดสคริปต์เล็ตอาจทําให้ UI ทำงานช้า

ใช้แท็กสคริปต์เล็ตสำหรับงานแบบครั้งเดียวที่รวดเร็ว เช่น การรวมเนื้อหาอื่นๆ หรือการตั้งค่าค่าคงที่ ส่วนข้อมูลอื่นๆ ทั้งหมดควรโหลดโดยใช้การเรียกใช้ google.script.run การเขียนโค้ดในลักษณะที่ไม่สอดคล้องกันนี้ทําได้ยากกว่า แต่ช่วยให้ UI โหลดได้เร็วขึ้นและมีโอกาสแสดงภาพหมุนหรือข้อความการโหลดอื่นๆ แก่ผู้ใช้

ไม่ — โหลดในเทมเพลต

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

ควรทำ - โหลดแบบไม่พร้อมกัน

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

โหลดทรัพยากรโดยใช้ HTTPS

หากหน้าเว็บแสดงโดยใช้IFRAME โหมดแซนด์บ็อกซ์เวอร์ชันใหม่ ซึ่งรวมถึงไฟล์ JavaScript หรือ CSS ที่ไม่ได้แสดงโดยใช้ HTTPS จะทำให้เกิดข้อผิดพลาดอย่างเช่นข้อผิดพลาดด้านล่าง

เนื้อหาแบบผสม: หน้าเว็บที่ "https://..." โหลดผ่าน HTTPS แต่ขอสคริปต์ที่ไม่ปลอดภัย "http://..." คำขอนี้ถูกบล็อกเนื่องจากเนื้อหาต้องแสดงผ่าน HTTPS

ไลบรารียอดนิยมส่วนใหญ่รองรับทั้ง HTTP และ HTTPS ดังนั้นการเปลี่ยนระบบจึงมักเป็นแค่การใส่ "s" ส่วนเพิ่มลงใน URL

ใช้การประกาศประเภทเอกสาร HTML5

หากหน้าเว็บแสดงโดยใช้IFRAME โหมดแซนด์บ็อกซ์เวอร์ชันใหม่ ให้ใส่ข้อมูลโค้ดต่อไปนี้ที่ด้านบนของไฟล์ HTML

<!DOCTYPE html>

การประกาศประเภทเอกสารนี้จะบอกให้เบราว์เซอร์ทราบว่าคุณออกแบบหน้าเว็บมาเพื่อเบราว์เซอร์สมัยใหม่ และไม่ควรแสดงผลหน้าเว็บโดยใช้โหมดที่ไม่มาตรฐาน แม้ว่าคุณจะไม่ได้วางแผนที่จะใช้ประโยชน์จากองค์ประกอบ HTML5 หรือ JavaScript API สมัยใหม่ แต่การดำเนินการนี้จะช่วยให้หน้าเว็บแสดงผลได้อย่างถูกต้อง

โหลด JavaScript เป็นรายการสุดท้าย

นักพัฒนาเว็บจำนวนมากแนะนำให้โหลดโค้ด JavaScript ที่ด้านล่างของหน้าเพื่อเพิ่มการตอบสนอง และนี่จะยิ่งสำคัญมากขึ้นเมื่อใช้บริการ HTML การย้ายแท็ก <script> ไปที่จุดสิ้นสุดของหน้าจะทำให้เนื้อหา HTML แสดงผลก่อนที่จะมีการประมวลผล JavaScript ซึ่งจะช่วยให้คุณนำเสนอตัวหมุนหรือข้อความอื่นๆ แก่ผู้ใช้ได้

ใช้ประโยชน์จาก jQuery

jQuery เป็นไลบรารี JavaScript ที่ได้รับความนิยมซึ่งทําให้งานทั่วไปหลายอย่างในการพัฒนาเว็บง่ายขึ้น