JavaScript'i HTML gövdesine yerleştirmek kötü bir uygulama mı?

Question 1

Üzerinde çalıştığım bir ekip, <script>etiketleri HTML sayfalarımızın gövdesinde rastgele yerlerde kullanma alışkanlığı edinmiştir . Örneğin:

<html>
    <head></head>
    <body>
        <div id="some-div">
            <script type="text/javascript">//some javascript here</script>
        </div>
    </body>
</html>

Bunu daha önce görmemiştim. Test ettiğim birkaç tarayıcıda çalışıyor gibi görünüyor. Ama bildiğim kadarıyla böyle yerlere betik etiketleri koymak geçerli değil.

Yanlış mıyım? Komut dosyası etiketlerini bunun gibi div etiketlerinin içine koymamız ne kadar kötü? Bilmem gereken herhangi bir tarayıcı uyumluluk sorunu var mı?

Question 2

Tamamen geçerli.

Buradaki işaretlemede büyük ve büyük kod bloklarını karıştırmak istemezsiniz (harici komut dosyalarını kullanmak daha iyidir), ancak aşağıdakiler için yararlı olabilir:

aşamalı geliştirme için fazladan bağlama bilgisi ekleme (bu verilerin bir sınıf adına veya özelliklerde genişletilmiş bilgileri gizlemeye yönelik başka bir yaklaşıma sığmasının zor olduğu durumlarda); veya
komut dosyası içeren bir geliştirmeyi olabildiğince çabuk başlatmak gerektiğinde (pencere yüklemesini / belgeye hazır olmasını beklemek yerine). Bunun bir örneği, çok geç ateşlenirse rahatsız edebilen otomatik odaklanma olabilir.

<style>İzin verilmeyen öğeler düşünüyor olabilirsiniz <body>(çoğu tarayıcı buna rağmen izin verse de).

Question 3

Aslında oldukça yaygındır. Örneğin, Google'ın analiz izleme kodu yalnızca şu sözdizimini kullanır:

<script type="text/javascript">
  var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
  document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>

Google için yeterince iyiyse ...

Question 4

Geçerli ve sunucu tarafı çerçevenize ve kodun yapısına bağlı olarak bazen kaçınılması çok zordur.

Question 5

Birkaç kişinin de belirttiği gibi, geçerli, işe yarıyor ve yaygın olarak kullanılıyor.

Anlambilimin önerdiği (veya en azından tavsiye etmek için kullanılan) en iyi uygulamalar, komut dosyası etiketlerini başlığın içine yerleştirmektir.

Performansı hesaba katan daha modern en iyi uygulamalar, herhangi bir JavaScript kodu yürütülmeden önce işaretlemenin tamamen işlenmesine izin vermek için komut dosyası etiketlerinin (harici ve satır içi) gövde etiketinin sağ altına yerleştirilmesini önerir.

Kodun daha kolay anlaşılması ve bakımı kolay olması için, kodun harici bir dosyada olduğu ve etkinlikleri DOM'a (Google'ın göze batmayan JavaScript) bağladığı "göze batmayan JavaScript" önerilir.

Satır içi JavaScript'e sahip olmanın yararlı olduğu bir durum, değişkenleri yalnızca sunucu tarafında var olan ve daha sonra harici JavaScript kodu tarafından kullanılacak değerlerle başlatmaktır.

Question 6

Başa harici komut dosyalarına ve her şeyi başlatan, widget'ları ve her şeyi vücutta başlatan komut dosyalarına referanslar koymayı tercih ederim.

Karşılaşılması çok kolay bir sorun, vücuttaki bir komut dosyası öğesinin kendisinden sonra gelen öğelere erişememesidir. Ayrıca, ilgili kötü bir tarayıcı uyumluluk sorunu, IE'nin komut dosyası öğelerinin içinde bulundukları öğeyi değiştirmesine izin vermemesidir. Dolayısıyla, buna sahipseniz:

<div id="foo">
  <script type="text/javascript">
    document.getElementById("foo")... // do something to it
  </script>
</div>

IE sayfanızı beğenmeyecek. IE'nin eski sürümleri, bunun için çok şifreli hata mesajları veriyordu veya hatta tüm sayfayı boşaltıyordu, ancak IE8 açıklayıcı bir hata mesajı veriyor gibi görünüyor.

Komut dosyalarınızın yalnızca erişim için güvenli olan DOM'a eriştiğinden emin olduğunuz sürece, komut dosyası öğelerini vücuda yerleştirmenin kötü olduğunu düşünmüyorum. Aslında, IMHO, ilgili öğelerden sonra pencere öğelerini başlatan komut dosyalarını koymak, her şeyi tek bir yere koymaktan daha okunaklı olabilir (ve bunun onları daha erken çalıştırmasına neden olabileceğine inanıyorum, bu da sayfa yüklendikçe daha az atlamaya neden oluyor).

Question 7

Bu geçerlidir!

Kullanabilirsiniz:

<script type="text/javascript">
    //<![CDATA[

    // Some JavaScript code that perfectly validates in the W3C validator

    //]]>
</script>

Genel olarak kötü bir uygulama olup olmadığını söyleyebileceğinizi sanmıyorum. Durumda söylemelisin. Ancak, tüm JavaScript kodunuzun aynı yerde olması elbette iyidir. HTML dosyanızın her yerinde küçük JavaScript kodlarınız varsa, bu biraz dağınıktır.

Question 8

Bunu daha önce görmemiştim. Test ettiğim birkaç tarayıcıda çalışıyor gibi görünüyor. Ama bildiğim kadarıyla böyle yerlere betik etiketleri koymak geçerli değil.

Bu geçerlidir, ancak iyi (veya önerilen) bir uygulama değildir.

Yanlış mıyım? Komut dosyası etiketlerini bunun gibi div etiketlerinin içine koymamız ne kadar kötü? Bilmem gereken herhangi bir tarayıcı uyumluluk sorunu var mı?

<script>Diğer öğelerin altına bir yerleştirme sorunu yoktur (ancak içinde <head>veya içinde olmalıdır <body>). Tarayıcı uyumluluğu açısından da bir sorun yoktur, ancak JS komut dosyalarının web sayfalarına gömülmesi ciddi dezavantajlar sunar (nasıl / neden kötü olarak kabul edilirler) :

Sayfa ağırlığı ekler
Küçültme için zorluk (veya muhtemelen imkansız)
Başka sayfalar için taşınamaz veya kullanılamaz
Önbelleğe alınamaz (sayfa her yüklendiğinde indirilmesi gerekir)
Kaygıların ayrılması yok (sürdürülmesi daha zor)

Question 9

Ancak, HTML'nin bir bölümü için gereken JavaScript kodunun bunun için orada olacağını bilmeniz de iyidir. Dosyanın tepesinde bir miktar dahil etme iddiasında bulunmak ve oluşturmak zorunda kalmak yerine.

Dolayısıyla, "bu HTML'yi kullanacaksanız, xyz.js'yi içe aktardığınızdan emin olun" yerine, yalnızca HTML'yi dahil edebilir ve onunla işiniz bitebilir.

Yani, mutlaka korkunç bir kötülük değil. Belki olağanüstü derecede harika değil, ama tamamen korkunç da değil. Niyete bağlı.

Question 10

En iyi uygulama için Yahoo kullanıcı arayüzüne bakın: http://developer.yahoo.com/performance/rules.html (sayfanın altındaki JavaScript)

Question 11

Kesinlikle yasal; Örneğin bunu Exforsys'de birkaç sayfada görmüştüm .

Şimdi bu, HTML ve JavaScript'in temellerini gösteren bir eğitim sitesidir, bu nedenle bu bağlamda tamamen anlaşılabilir. Bununla birlikte, basit bir veya iki ifadeden başka bir şey için üretim kodunda görmek istemiyorum. Neyle değiştirdiğinizi görmeden // Some JavaScript code hereyorum yapmak istemem.

Bununla birlikte herhangi bir tarayıcı sorunu olmamalıdır.

Question 12

İçine <script> eklemek geçerlidir body, ancak Internet Explorer bundan pek hoşlanmaz. Bu nedenle, daha güvenli olmak için, komut dosyalarınızın <head> etiketinin içinde olduğundan emin olun.

Bu, üzerinde çalıştığımız projede (özellikle Internet Explorer için) gerçekten tahribat yaratıyordu.

Question 13

Ekibinizin bunu ya dinamik olarak bir komut dosyası eklemek istedikleri için ya da sayfa yüklenirken ateşleyecek bir komut dosyası yazdıkları için yaptığını varsayıyorum.

KESİNLİKLE GEREKLİ olduğunda bunu yapmanın yanlış bir şey olduğunu söylemem (bir CDATA bloğunda olduğu sürece), ancak bunun dışında ekibinize Prototype veya jQuery gibi bir komut dosyası kitaplığı kullanmalarını ve saklamalarını tavsiye ederim. sayfanın dışındaki komut dosyaları. Bu genellikle daha temizdir ve kitaplıklar bazen koda biraz temizlik zorlar, ki bu şu anda gerçekleşmiyordur.

Ayrıca, satır içi komut dosyası etiketlerinde zaman alıcı işlevler çalıştırmazdım, çünkü bunlar sayfa yüklemede gerçekleşir ve Jason yukarıda belirtildiği gibi sayfanın yüklenmesini yavaşlatabilir. Tüm komut dosyası kitaplıklarının, sayfanın yüklendiğinde bir şeyler yapmanıza izin veren düzgün işlevleri vardır ve size, DOM yüklendikten sonra olduğu gibi, sayfa yüklenirken bunları tetikleme seçeneği sunar.

Question 14

Programlamaya yaklaşımınızı geliştirmek kadar performansı iyileştirmekle ilgili birçok en iyi uygulamadan biridir.

Nihayetinde web geliştirmede, ürünü çıkarmak en önemli şeydir!

Question 15

Sürdürülebilirliğe zarar verse de tamamen geçerlidir. Ayrıca bkz. <script> etiketlerini HTML biçimlendirmesinde nereye koymalıyım? ve Firefox'ta bu jQuery işlevine yapılan çağrı neden başarısız oluyor? .

Question 16

Komut dosyalarının başlıkta tutulması gerektiğine dair sıklıkla belirtilen öneri, komut dosyasının çağrılmadan önce yüklenmesini sağlamaktır. Bu yalnızca belirli olay işleyicileri için bir sorundur. Diğer komut dosyası türleri için önemli değildir ve bazı türler için (document.write gibi) hiçbir anlam ifade etmez.

Question 17

Hem HTML hem de JavaScript sözdizimini aynı anda işleyebilen bir düzenleyiciniz varsa. Ve önce birkaç satır HTML ve ardından JavaScript cpde okumak isterseniz ... elbette. Göreyim seni.

Question 18

Bir kaç şey:

Kod açısından tamamen geçerlidir.
Tamamen tavsiye edilmiyor.

Bunu yapmak, sayfanın geri kalanından herhangi birinin oluşturulabilmesi için JavaScript kodunun yürütülmesi gerektiğinden, sayfanızın yüklenmesini önemli ölçüde yavaşlatır. Bu JavaScript koduyla çok fazla iş yapıyorsanız, tarayıcınız kilitlenebilir. JavaScript kodunuzu (mümkün olduğunda) dinamik olarak ve sayfanızın sonuna (tercihen </body>etiketinden önce) yüklemeyi denemelisiniz .

Yüksek Performanslı JavaScript satın alın ve okuyun . JavaScript kodunu yazma şeklinizi değiştirecek.