דף זה תורגם על ידי Cloud Translation API.

שירות HTML: שיטות מומלצות

יצירת ממשקי משתמש באמצעות שירות ה-HTML מתבססת על הרבה דפוסים ושיטות שדומים לאלה של סוגים אחרים של פיתוח אתרים. עם זאת, יש כמה היבטים שייחודיים לסביבת Apps Script או שחשוב להדגיש אותם. בהמשך נסביר על כמה שיטות מומלצות שכדאי לזכור כשמפתחים ממשקי משתמש משירות 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 כדי ליצור במהירות ממשקים פשוטים, אבל השימוש בהן צריך להיות מוגבל כדי להבטיח שממשק המשתמש יהיה רספונסיבי. הקוד בתבניות מופעל פעם אחת כשהדף נטען, ולא נשלח תוכן ללקוח עד שהעיבוד מסתיים. אם יש לכם משימות שפועלות לאורך זמן בקוד של ה-scriptlet, יכול להיות שממשק המשתמש ייראה איטי.

משתמשים בתגי scriptlet למשימות מהירות וחד-פעמיות, כמו הכללת תוכן אחר או הגדרת ערכים סטטיים. את כל שאר הנתונים צריך לטעון באמצעות קריאות ל-google.script.run. קידוד באופן אסינכרוני הוא מסובך יותר, אבל הוא מאפשר לטעון את ממשק המשתמש מהר יותר, ומאפשר להציג למשתמש סמל טעינה או הודעת טעינה אחרת.

לא — טעינה בתבניות

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

ההצהרות האלה על סוג המסמך מציינות לדפדפן שתכננתם את הדף לדפדפנים מודרניים, ושהוא לא צריך לעבד את הדף באמצעות מצב תאימות (quirks mode). גם אם אתם לא מתכננים להשתמש ברכיבי HTML5 מודרניים או בממשקי API של JavaScript, הפעולה הזו תעזור להבטיח שהדף יוצג בצורה נכונה.

טעינת JavaScript בסוף

מפתחי אתרים רבים ממליצים לטעון קוד JavaScript בתחתית הדף כדי לשפר את מהירות התגובה, וזה חשוב במיוחד כשמשתמשים בשירות HTML. העברת תגי <script> לסוף הדף תאפשר לתוכן HTML לעבור עיבוד לפני JavaScript, וכך תוכלו להציג למשתמש סמל טעינה או הודעה אחרת.

שימוש ב-jQuery

‫jQuery היא ספריית JavaScript פופולרית שמפשטת הרבה משימות נפוצות בפיתוח אתרים.

שירות HTML: שיטות מומלצות קל לארגן דפים בעזרת אוספים אפשר לשמור ולסווג תוכן על סמך ההעדפות שלך.