דף זה תורגם על ידי 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, כך שהמעבר בדרך כלל פשוט צריך להוסיף ' לכתובת ה-URL.

שימוש בהצהרה לגבי סוג מסמך HTML5

אם הדף מוצג באמצעות הגרסה החדשה יותר של IFRAME במצב ארגז חול, יש לוודא כדי לכלול את קטע הקוד הבא בחלק העליון של קובץ ה-HTML.

<!DOCTYPE html>

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

טעינת JavaScript אחרונה

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

נצלו את jQuery

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