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

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

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

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

مثال زیر یک تابع command 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 قالب را می توان برای ساخت سریع رابط های ساده استفاده کرد، اما استفاده از آن باید محدود شود تا اطمینان حاصل شود که رابط کاربری شما پاسخگو است. کد موجود در قالب ها یک بار هنگام بارگذاری صفحه اجرا می شود و تا زمانی که پردازش کامل نشود، هیچ محتوایی برای مشتری ارسال نمی شود. داشتن وظایف طولانی مدت در کد اسکریپت می تواند باعث کند UI شما کند به نظر برسد.

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

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

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

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

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

<!DOCTYPE html>

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

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

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

از jQuery بهره ببرید

jQuery یک کتابخانه محبوب جاوا اسکریپت است که بسیاری از کارهای رایج در توسعه وب را ساده می کند.