jQuery: Sayfanın altındaki harici JS ise neden document.ready kullanasınız?

Tüm JS'mi sayfanın en altına yüklenen harici dosyalar olarak ekliyorum. Bu dosyaların içinde, ready olayından çağırdığım gibi tanımlanmış birkaç yöntemim var:

var SomeNamepsace = {};

SomeNamepsace.firstMethod = function () {
    // do something
};

SomeNamepsace.secondMethod = function () {
    // do something else
};

$(document).ready(function () {
    SomeNamepsace.firstMethod();
    SomeNamepsace.secondMethod();
});

Bununla birlikte, hazır işlevini kaldırdığımda ve yöntemleri doğrudan çağırdığımda, her şey aynı şekilde çalışıyor, ancak önemli ölçüde daha hızlı çalışıyor - oldukça basit bir dosyada neredeyse bir saniye daha hızlı! Belgenin bu noktada yüklenmesi gerektiğine göre (tüm işaretleme komut dosyası etiketlerinden önce geldiğinden), ready olayını kullanmaya devam etmek için iyi bir neden var mı?

Harika soru.

Tüm "komut dosyalarını sayfanızın altına koyun" tavsiyesi ve hangi problemleri çözmeye çalıştığı konusunda bazı karışıklıklar vardır. Bu soru için sayfanın altına betik koymanın performansı / yükleme sürelerini etkileyip etkilemeyeceğinden bahsetmeyeceğim. $(document).ready Senaryoları da sayfanın altına koyarsan ihtiyacın olup olmadığından bahsedeceğim .

Komut dosyalarınızda hemen çağırdığınız işlevlerde DOM'a başvurduğunuzu varsayıyorum ( documentveya kadar basit herhangi bir şey document.getElementById). Ayrıca, yalnızca bu [DOM referansı] dosyaları hakkında soru sorduğunuzu varsayıyorum. DOM referans kodunuzun gerektirdiği (jQuery gibi) IOW, kitaplık komut dosyalarının veya komut dosyalarının sayfanın önceki kısımlarına yerleştirilmesi gerekir.

Sorunuzu cevaplamak için : DOM referanslı komut dosyalarınızı sayfanın altına eklerseniz, Hayır, ihtiyacınız yoktur $(document).ready.

Açıklama : Pratik kural gibi ilgili uygulamaların yardımı olmadan : sayfadaki DOM öğeleriyle etkileşime giren herhangi bir kod, sayfanın referans verdiği öğelerden daha aşağıya yerleştirilmeli / dahil edilmelidir. Yapılması en kolay şey, bu kodu kapanıştan önce yerleştirmektir . Buraya ve buraya bakın . Ayrıca, IE'nin korkunç "İşlem iptal edildi" hatası etrafında da çalışır ."onload"$(document).ready</body>

Bunu söyledikten sonra, bu hiçbir şekilde kullanımını geçersiz kılmaz $(document).ready. Bir nesneye yüklenmeden önce başvurmak, DOM JavaScript'te başlarken yapılan en yaygın hatalardan [biridir] (sayılamayacak kadar çok kez tanık olunmuştur). Bu, jQuery'nin soruna çözümüdür ve bu komut dosyasının referans verdiği DOM öğelerine göre nereye dahil edileceğini düşünmenize gerek yoktur. Bu, geliştiriciler için büyük bir kazanç. Düşünmeleri gereken bir şey daha az.

Ayrıca, DOM referans veren tüm komut dosyalarını sayfanın alt kısmına taşımak genellikle zor veya pratik değildir (örneğin, document.writeçağrıları yayınlayan herhangi bir komut dosyasının yerinde kalması gerekir). Diğer zamanlarda, bazı şablonlar oluşturan veya dinamik javascript parçaları oluşturan, içinde js'den önce eklenmesi gereken işlevlere başvuran bir çerçeve kullanıyorsunuz .

Son olarak, tüm DOM referanslı kodların içine sıkıştırılması "en iyi uygulama" idi window.onload, ancak belgeleme nedenlerinden dolayı$(document).ready uygulamalar tarafından gölgede bırakıldı .

Tüm bunlar $(document).ready, DOM öğelerine çok erken başvurma sorununa çok daha üstün, pratik ve genel bir çözüm getiriyor.