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

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