javascript - Neden document.write 'kötü bir uygulama' olarak kabul ediliyor?

document.write'ın kötü bir uygulama olarak kabul edildiğini biliyorum; ve üçüncü taraf bir satıcıya, analiz kodlarının uygulamalarında neden document.write kullanmamaları gerektiğini belirtmek için bir nedenler listesi derlemeyi umuyorum.

Lütfen document.write'i kötü bir uygulama olarak görme nedeninizi aşağıya ekleyin.

Cevap #1

Daha ciddi sorunlardan bazıları:

  • document.write (bundan sonra DW) XHTML'de çalışmaz

  • DW DOM'u doğrudan değiştirmez, bu da daha fazla manipülasyonu engeller (bunun kanıtını bulmaya çalışıyorum, ama en iyi ihtimalle durumsal)

  • Sayfa yüklemesi tamamlandıktan sonra yürütülen DW, sayfanın üzerine yazacak, yeni bir sayfa yazacak veya çalışmayacaktır

  • DW karşılaşıldığında yürütülür: belirli bir düğüm noktasına enjekte edemez

  • DW aslında konsept olarak DOM'un çalıştığı şekilde olmayan seri hâle getirilmiş metin yazıyor ve bu, hata yaratmanın kolay bir yolu (.innerHTML de aynı soruna sahip)

Güvenli ve DOM dostu DOM manipülasyon yöntemlerini kullanmak çok daha iyidir

Cevap #2

Aslında document.write ile doğrudan bir sorun yok. Sorun, onu kötüye kullanmanın gerçekten çok kolay olmasıdır. Hatta açıkça kötüye kullanmak bile mümkün.

Analitik kod sağlayan satıcılar (Google Analytics gibi) açısından, bu tür kod parçacıklarını dağıtmanın aslında en kolay yolu budur.

  1. Scriptleri küçük tutar
  2. Zaten oluşturulmuş onload olaylarını geçersiz kılma veya onload olaylarını güvenli bir şekilde eklemek için gerekli soyutlamayı dahil etme konusunda endişelenmelerine gerek yok
  3. Oldukça uyumlu

Belge yüklendikten sonra kullanmaya çalışmadığınız sürece, document.write doğası gereği kötü değildir, benim mütevazı görüşüme göre.

Cevap #3

Sayfanızı engelleyebilir

document.write yalnızca sayfa yüklenirken çalışır; Sayfa yüklemesi tamamlandıktan sonra çağırırsanız, tüm sayfanın üzerine yazar.

Bu aslında, onu bir satır içi betik bloğundan çağırmanız gerektiği anlamına gelir - Ve bu, tarayıcının sayfanın takip eden kısımlarını işlemesini engelleyecektir. Betikler ve resimler, yazma bloğu bitene kadar indirilmeyecektir.

Cevap #4

document.write'in bir başka meşru kullanımı, HTML5 Boilerplate index.html örneğinden gelmektedir.

<!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if offline -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.6.3.min.js"><\/script>')</script>

Ayrıca json2.js JSON çözümleme/dizeleştirme polyfill'i kullanmak için aynı tekniği gördüm (IE7 ve altı için gerekli).

<script>window.JSON || document.write('<script src="json2.js"><\/script>')</script>

Cevap #5

Artı:

  • Harici (barındırdığınız alan/domainden) bir betikten satır içi içerik yerleştirmenin en kolay yolu budur.
  • Bir çerçeve/iframe içindeki tüm içeriği üzerine yazabilirsiniz. Daha modern Ajax teknikleri yaygınlaşmadan önce (1998-2002) menü/navigasyon parçaları için bu tekniği çok kullanırdım.

Eksiler:

  • Dış betik yüklenene kadar işleme motorunu duraklatmak için serileştirir, bu da dahili bir betikten çok daha uzun sürebilir.
  • Genellikle, betiğin içerik içinde yerleştirildiği şekilde kullanılır, bu da kötü bir biçim olarak kabul edilir.

Cevap #6

Benim iki kuruşluk fikrim, genel olarak ağır işler için document.write kullanmamalısınız, ancak bunun kesinlikle faydalı olduğu bir durum vardır:

http://www.quirksmode.org/blog/archives/2005/06/three_javascrip_1.html

Bunu yakın zamanda bir AJAX kaydırıcı galerisi oluşturmaya çalışırken keşfettim. İki iç içe geçmiş div oluşturdum ve dış <div>e JS ile width/height ve overflow: hidden uyguladım. Bu, tarayıcının JS devre dışı bırakılmış olması durumunda, divin galerideki görüntüleri karşılayacak şekilde kaymasını sağlamak içindi - hoş bir nazik düşüş (graceful degradation).

Mesela, yukarıdaki makalede olduğu gibi, bu JS'in CSS'i kaçırması sayfa yüklenene kadar devreye girmedi ve div yüklendiğinde kısa bir anlık flaş oluştu. Bu yüzden sayfa yüklenirken bir CSS kuralı yazmam veya bir stil sayfası eklemem gerekiyordu.

Açıkça, bu XHTML'te işe yaramayacak, ama XHTML biraz ölü bir yapı gibi göründüğü için (ve IE'de etiket çorbası olarak render ettiği için) DOCTYPE seçiminizi yeniden değerlendirmeye değer olabilir...

İlgili makaleler