این صفحه به‌وسیله ‏Cloud Translation API‏ ترجمه شده است.

سرویس HTML: بهترین روش ها

ایجاد رابط‌های کاربری با سرویس HTML از بسیاری از الگوها و شیوه‌های مشابه سایر انواع توسعه وب پیروی می‌کند. با این حال، برخی جنبه‌ها وجود دارند که مختص محیط Apps Script هستند یا ارزش برجسته کردن دارند. در زیر برخی از بهترین شیوه‌هایی را که باید هنگام توسعه رابط‌های کاربری سرویس HTML خود در نظر داشته باشید، پوشش خواهیم داد.

HTML، CSS و جاوا اسکریپت را از هم جدا کنید

نگه داشتن تمام کدهای HTML، CSS و جاوا اسکریپت در یک فایل می‌تواند خواندن و توسعه پروژه شما را دشوار کند. در حالی که Apps Script نیاز به قرار دادن کد سمت کلاینت در فایل‌های .html دارد، شما هنوز می‌توانید CSS و جاوا اسکریپت سمت کلاینت خود را در فایل‌های مختلف جدا کنید و سپس آنها را با یک تابع سفارشی در صفحه HTML اصلی قرار دهید.

مثال زیر یک تابع include() سمت سرور سفارشی را در فایل Code.gs تعریف می‌کند تا محتوای فایل‌های Stylesheet.html و JavaScript.html را به فایل Page.html وارد کند. وقتی این تابع با استفاده از printing scriptlets فراخوانی می‌شود، محتوای فایل مشخص شده را به فایل فعلی وارد می‌کند. توجه داشته باشید که فایل‌های وارد شده حاوی تگ‌های <style> و <script> هستند زیرا آنها قطعه کدهای HTML هستند و فایل‌های .css یا .js خالص نیستند.

کد.gs

function doGet(request) {
  return HtmlService.createTemplateFromFile('Page')
      .evaluate();
}

function include(filename) {
  return HtmlService.createHtmlOutputFromFile(filename)
      .getContent();
}

صفحه.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>

شیوه‌نامه.html

<style>
p {
  color: green;
}
</style>

جاوا اسکریپت.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 sandbox ارائه می‌شود، اگر فایل‌های جاوا اسکریپت یا CSS که با استفاده از HTTPS ارائه نمی‌شوند، شامل این حالت باشند، منجر به خطاهایی مانند خطای زیر خواهد شد.

محتوای ترکیبی: صفحه‌ی «https://...» از طریق HTTPS بارگذاری شده است، اما اسکریپت ناامن «http://...» را درخواست کرده است. این درخواست مسدود شده است؛ محتوا باید از طریق HTTPS ارائه شود.

اکثر کتابخانه‌های محبوب از هر دو HTTP و HTTPS پشتیبانی می‌کنند، بنابراین تغییر معمولاً فقط با اضافه کردن یک «s» به URL انجام می‌شود.

از اعلان نوع سند HTML5 استفاده کنید

اگر صفحه شما با استفاده از حالت جدیدتر IFRAME sandbox ارائه می‌شود، حتماً قطعه کد زیر را در بالای فایل HTML خود قرار دهید.

<!DOCTYPE html>

این نوع اعلان سند به مرورگر می‌گوید که شما صفحه را برای مرورگرهای مدرن طراحی کرده‌اید و نباید صفحه شما را با استفاده از حالت quirks رندر کند. حتی اگر قصد ندارید از عناصر مدرن HTML5 یا APIهای جاوا اسکریپت استفاده کنید، این به شما کمک می‌کند تا صفحه شما به درستی نمایش داده شود.

آخرین بار جاوا اسکریپت را بارگیری کنید

بسیاری از توسعه‌دهندگان وب توصیه می‌کنند که کد جاوا اسکریپت را در پایین صفحه بارگذاری کنید تا واکنش‌گرایی افزایش یابد، و این موضوع در مورد سرویس HTML حتی مهم‌تر است. انتقال تگ‌های <script> به انتهای صفحه به محتوای HTML اجازه می‌دهد قبل از پردازش جاوا اسکریپت، رندر شود و به شما این امکان را می‌دهد که یک spinner یا پیام دیگری را به کاربر نمایش دهید.

از جی‌کوئری بهره ببرید

جی‌کوئری یک کتابخانه محبوب جاوااسکریپت است که بسیاری از وظایف رایج در توسعه وب را ساده می‌کند.

سرویس HTML: بهترین روش ها با مجموعه‌ها، منظم بمانید ذخیره و طبقه‌بندی محتوا براساس اولویت‌های شما.