HTML Hizmeti: En İyi Uygulamalar

HTML hizmetiyle kullanıcı arayüzleri oluştururken aynı kalıpların birçoğu ve diğer web geliştirme türleri olarak bilinen uygulamalar içinde yer alır. Ancak, çözümün Apps Komut Dosyası ortamına özgü veya vurgulamayı seçeceğim. Aşağıda, değişiklik yaparken aklınızda tutmanız gereken bazı en iyi geliştirmeyi öğreneceksiniz.

HTML, CSS ve JavaScript'i ayırın

Tüm HTML, CSS ve JavaScript kodunu tek bir dosyada saklamak, okuması ve geliştirmesi zor olur. Apps Komut Dosyası, istemci taraflı kod gerektirir. diğer öğeleri de .html dosyalarına yerleştirebilmek için CSS ile istemci tarafınızı ayırmaya devam edebilirsiniz. JavaScript'i farklı dosyalara dönüştürme ve daha sonra bunları ana HTML sayfasına ekleme kullanabilirsiniz.

Aşağıdaki örnekte özel bir sunucu tarafı include() işlevi Stil sayfası.html ve JavaScript.html dosya içeriğini içe aktarmak için Code.gs dosyası Page.html dosyasına koyabilirsiniz. Şununla çağrıldığında: komut dosyası yazdırma, bu işlev, belirtilen dosya içeriğini geçerli dosyaya aktarır. Dahil edilen dosyaların, saf .css veya .js dosyaları değil HTML snippet'leri oldukları için <style> ve <script> etiketleri içerdiğini unutmayın.

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>

Verileri şablonlarda değil, eşzamansız olarak yükleme

Şablonlu HTML, belirli aralıklarla basit arayüzler oluşturabilirsiniz, ancak kullanıcı arayüzünüzün benzersiz olduğundan emin olmak için kullanımı duyarlıdır. Şablonlardaki kod, sayfa yüklendiğinde bir kez yürütülür ve işleme tamamlanana kadar istemciye içerik gönderilmez. Komut dosyası kodunuzda uzun süren görevlerin olması kullanıcı arayüzünüzün yavaş görünmesine neden olabilir.

Diğer içerikleri ekleme gibi hızlı, tek seferlik görevler için komut dosyası etiketlerini kullanın veya statik değerler belirlemeniz gerekir. Diğer tüm veriler google.script.run çağrı. Bu şekilde eşzamansız kodlama yapmak daha zordur ancak kullanıcı arayüzünün daha hızlı yüklenmesine olanak tanır ve kullanıcıya bir döndürme çubuğu veya başka bir yükleme mesajı gösterme fırsatı verir.

Yapmayın — şablonlara yükleyin

<p>List of things:</p>
<? var things = getLotsOfThings(); ?>
<ul>
  <? for (var i = 0; i < things.length; i++) { ?>
    <li><?= things[i] ?></li>
  <? } ?>
</ul>

Yapılması gerekenler: Eşzamansız olarak yükleyin.

<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>

Kaynakları HTTPS kullanarak yükleme

Sayfanız daha yeni IFRAME kullanılarak sunuluyorsa korumalı alan modu ve HTTPS kullanılarak sunulmayan JavaScript veya CSS dosyaları aşağıdaki gibi hatalara neden olur: bir tane aşağıdadır.

Karma içerik: "https://..." adresindeki sayfa HTTPS üzerinden yüklendi, ancak güvenli olmayan bir komut dosyası 'http://...' istedi. Bu istek engellendi; içerik HTTPS üzerinden sunulmalıdır.

En popüler kitaplıklar hem HTTP hem de HTTPS'yi desteklediğinden geçiş genellikle yalnızca bir anahtar kelime eklemeniz yeterlidir. URL'yi ekleyin.

HTML5 belge türü bildirimini kullanma

Sayfanız daha yeni IFRAME kullanılarak sunuluyorsa korumalı alan modunda kullanın.

<!DOCTYPE html>

Bu doküman türü sapmaları, tarayıcıya sayfayı şunun için tasarladığınızı bildirir: ve sayfanızı kullanırken Quirks mod. Tüm bu bilgileri JavaScript API'lerinden veya modern HTML5 öğelerinden yararlanmak için .

JavaScript'i en son yükle

Birçok web geliştiricisi, sayfanın alt kısmına JavaScript kodu yüklemenizi önerir. artırmak için kullanılabilir. Bu, HTML5 ya da diğer reklamlar için geliştirmenizi sağlar. <script> etiketlerinizi sayfanızın sonuna taşımak, HTML'nin JavaScript işlenmeden önce oluşturulduğundan emin olun. Böylece, kullanıcıya döner.

jQuery'den yararlanma

jQuery, web geliştirmede yaygın olarak kullanılan birçok görevi basitleştiren popüler bir JavaScript kitaplığıdır.