หน้านี้ได้รับการแปลโดย 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 จะ ตอบสนอง ระบบจะเรียกใช้โค้ดในเทมเพลต 1 ครั้งเมื่อโหลดหน้าเว็บ และ จะไม่ส่งเนื้อหาไปยังไคลเอ็นต์จนกว่าการประมวลผลจะเสร็จสมบูรณ์ การมีงานที่ใช้เวลานานในโค้ด Scriptlet อาจทำให้ UI ทำงานช้า

ใช้แท็ก Scriptlet สำหรับงานแบบครั้งเดียวที่รวดเร็ว เช่น การรวมเนื้อหาอื่นๆ หรือการตั้งค่าแบบคงที่ ส่วนข้อมูลอื่นๆ ทั้งหมดควรโหลดโดยใช้การเรียก google.script.run การเขียนโค้ดแบบอะซิงโครนัสนี้ทำได้ยากกว่า แต่จะช่วยให้ UI โหลดได้เร็วขึ้น และเปิดโอกาสให้แสดง Spinner หรือข้อความกำลังโหลดอื่นๆ แก่ผู้ใช้

อย่าโหลดในเทมเพลต

<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 ที่ได้รับความนิยมซึ่งช่วยลดความซับซ้อนของ งานทั่วไปหลายอย่างในการพัฒนาเว็บ