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

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

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

فصل HTML وCSS وJavaScript

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

استخدام بيان نوع مستند HTML5

إذا تم عرض صفحتك باستخدام الإصدار الأحدث من "IFRAME" وضع الحماية، فتأكد من لتضمين مقتطف الرمز التالي في أعلى ملف HTML.

<!DOCTYPE html>

تخبر عمليات تحديد نوع المستند هذه المتصفح الذي صممت الصفحة من أجله المتصفحات الحديثة، وأنها لن تعرض صفحتك باستخدام quirks. حتى لو لم تكن تخطط للاستفادة من عناصر HTML5 الحديثة أو واجهات برمجة تطبيقات JavaScript، سيساعد ذلك لضمان عرض صفحتك بشكل صحيح

تحميل JavaScript آخر مرة

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

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

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