تمت ترجمة هذه الصفحة بواسطة Cloud Translation API‏.

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

استخدِم علامات 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: أفضل الممارسات تنظيم صفحاتك في مجموعات يمكنك حفظ المحتوى وتصنيفه حسب إعداداتك المفضّلة.