خدمة HTML: أفضل الممارسات

إنّ إنشاء واجهات المستخدم باستخدام خدمة HTML يشبه عملية تطوير الويب العادية. ومع ذلك، هناك بعض الجوانب الخاصة ببيئة برمجة تطبيقات. يُبرز هذا الدليل أفضل الممارسات المتعلّقة بتطوير واجهات مستخدم سريعة الاستجابة وآمنة باستخدام خدمة HTML.

فصل HTML وCSS وJavaScript

يمكن أن يؤدي الجمع بين جميع رموز HTML وCSS وJavaScript في ملف واحد إلى صعوبة الحفاظ على المشاريع. على الرغم من أنّ "برمجة تطبيقات Google" تتطلّب أن يكون الرمز البرمجي من جهة العميل في ملفات ‎ .html، عليك فصل CSS وJavaScript من جهة العميل في ملفات منفصلة وتضمينها في صفحة HTML الرئيسية باستخدام دالة مخصّصة.

يستخدم المثال التالي دالة include من جهة الخادم في Code.gs لاستيراد Stylesheet.html وJavaScript.html إلى Page.html. عند استدعاء هذه الدالة باستخدام مقاطع برمجية للطباعة، تُدرج الدالة محتوى الملف مباشرةً. بما أنّ هذه الرموز المقتطفة هي رموز HTML وليست ملفات ‎ .css أو ‎ .js مستقلة، يجب أن تتضمّن العلامتَين <style> و<script>.

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 لتنفيذ مهام سريعة لمرة واحدة، مثل تضمين محتوى آخر أو ضبط قيم ثابتة. يجب تحميل جميع البيانات الأخرى باستخدام طلبات 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. حتى إذا لم تكن تخطّط للاستفادة من عناصر HTML5 الحديثة أو واجهات برمجة تطبيقات JavaScript، يساعد ذلك في ضمان عرض صفحتك بشكل صحيح.

تحميل JavaScript في النهاية

ينصح العديد من مطوّري الويب بتحميل رمز JavaScript في أسفل الصفحة لزيادة سرعة الاستجابة، وهذا الأمر أكثر أهمية مع خدمة HTML. يسمح نقل علامات <script> إلى نهاية الصفحة بعرض محتوى HTML قبل معالجة JavaScript، ما يتيح لك عرض مؤشر تحميل أو رسالة أخرى للمستخدم.

الاستفادة من jQuery

jQuery هي مكتبة JavaScript شائعة تسهّل تنفيذ العديد من المهام الشائعة في تطوير الويب.

خدمة HTML: أفضل الممارسات تنظيم صفحاتك في مجموعات يمكنك حفظ المحتوى وتصنيفه حسب إعداداتك المفضّلة.