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

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

فصل HTML وCSS وJavaScript

إنّ الاحتفاظ بجميع رموز HTML وCSS وJavaScript في ملف واحد قد يجعل قراءة مشروعك وتطويره أمرًا صعبًا. على الرغم من أنّ "برمجة تطبيقات Google" تتطلّب وضع الرمز البرمجي من جهة العميل في ملفات 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 المستند إلى النماذج لإنشاء واجهات بسيطة بسرعة، ولكن يجب الحد من استخدامه لضمان أن تكون واجهة المستخدم سريعة الاستجابة. يتم تنفيذ الرمز البرمجي في النماذج مرة واحدة عند تحميل الصفحة، ولا يتم إرسال أي محتوى إلى العميل إلى أن تكتمل المعالجة. يمكن أن يؤدي وجود مهام تستغرق وقتًا طويلاً في رمز النص البرمجي الصغير إلى ظهور واجهة المستخدم بطيئة.

استخدِم علامات نصوص التشغيل البرمجي للمهام السريعة لمرة واحدة، مثل تضمين محتوى آخر أو ضبط قيم ثابتة. يجب تحميل جميع البيانات الأخرى باستخدام طلبات google.script.run. إنّ الترميز بهذه الطريقة غير المتزامنة أكثر صعوبة، ولكنه يسمح لواجهة المستخدم بالتحميل بشكل أسرع ويمنحها الفرصة لعرض مؤشر تقدم أو رسالة loading (تحميل) أخرى للمستخدم.

لا: تحميلها في النماذج

<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 رائجة تعمل على تبسيط العديد من المهام الشائعة في تطوير الويب.