ฟังก์ชัน include() ใน Apps Script

bysemicon -
0

 


ฟังก์ชัน include() ใช้สำหรับดึงไฟล์ HTML อื่นเข้ามาแทรกในหน้าเว็บ Apps Script มี 2 รูปแบบ

แบบที่ 1

function include(file){
  return HtmlService.createHtmlOutputFromFile(file).getContent();
}


ทำงานอย่างไร

  • ดึง HTML ตรง ๆ จากไฟล์
  • ไม่ประมวลผล <script> แบบ templating เช่น <?= ?> หรือ <? ?>
  • คือ HTML ดิบ 100%

ข้อดี

  • เร็วกว่า เพราะไม่ต้องประมวลผล Template
  • ใช้กรณีที่เป็นไฟล์ static เช่น CSS, JS, UI ที่ไม่ต้องการ logic
  • เหมาะกับไฟล์ที่ไม่มี Apps Script templating

ข้อเสีย

  • ใช้ตัวแปรหรือโค้ดใน templating ไม่ได้
เช่น <?= getData() ?> จะไม่ถูกประมวลผล

แบบที่ 2

function include(file){
  return HtmlService.createTemplateFromFile(file).evaluate().getContent();
}


ทำงานอย่างไร

  • โหลดไฟล์ HTML เป็น Template
  • สามารถใช้โค้ดฝั่ง Apps Script ใน HTML เช่น:
<?= name ?>
<?!= include('nav') ?>
  • หลังจาก evaluate() จะถูกแปลงเป็น HTML พร้อมข้อมูลจริง

ข้อดี

  • รองรับ Templating Engine ของ Google Apps Script
  • ใช้ตัวแปรจาก Code.gs ได้
  • สามารถ include ซ้อน include ได้
  • เหมาะกับหน้าเว็บที่ต้องใส่ข้อมูลจากเซิร์ฟเวอร์ลง HTML

ข้อเสีย

  • ช้ากว่านิดหน่อยเพราะต้อง compile template
  • ไม่จำเป็นถ้าไฟล์เป็น static

สรุป

แบบใช้เมื่อข้อดี
createHtmlOutputFromFile()ไฟล์ static (CSS, JS, HTML แบบธรรมดา)เร็ว, ไม่ต้องประมวลผล
createTemplateFromFile().evaluate()ไฟล์มีตัวแปร, include, templatingใช้ Apps Script templating ได้

ข้อแนะนำแบบใช้งานจริง

ใช้แบบที่ 1 สำหรับ

  • CSS <style>
  • JS <script>
  • Navbar/Sidebar แบบคงที่

ใช้แบบที่ 2 สำหรับ

  • หน้าเว็บหลักที่ต้องใส่ข้อมูลจาก Sheets
  • ส่วนที่ต้องใช้ <?= ?>
  • หน้า Dashboard

ถ้าต้องการระบบที่ใช้ง่ายที่สุดใช้ 2 แบบผสมกัน

1. แบบ SAMRT (เลือก static ให้ไฟล์ js/css)

     
function include(file) {
  // สำหรับไฟล์ .html ที่มี css/js เป็นไฟล์คงที่
  if (file.includes("css") || file.includes("script")) {
    return HtmlService.createHtmlOutputFromFile(file).getContent();
  }

  return HtmlService.createTemplateFromFile(file).evaluate().getContent();
}


2. แบบตรวจชื่อไฟล์ง่ายที่สุด

     
function include(file) {
  if (file === "css" || file === "script") {
    return HtmlService.createHtmlOutputFromFile(file).getContent();
  }
  return HtmlService.createTemplateFromFile(file).evaluate().getContent();
}


include ใน index.html แบบถูกต้อง

     
<head>
  <!-- CSS -->
  <style>
    <?!= include('css'); ?>
  </style>
</head>
<body>

  <?!= include('navbar'); ?>

  <!-- content -->

  <?!= include('footer'); ?>

  <!-- JS -->
  <script>
    <?!= include('script'); ?>
  </script>

</body>


Download

Tags:
แสดงความคิดเห็น (0)
ใหม่กว่า เก่ากว่า