JQuery'nin document.ready işlevini ne zaman kullanmalıyım?

107

Javascript / jQuery'yi ilk kullanmaya başladığımda document.ready'yi kullanmam söylendi, ancak nedenini hiç öğrenmedim.

Birisi, javascript / jquery kodunu jQuery’nin içine sarmanın ne zaman mantıklı olduğu konusunda bazı temel yönergeler sağlayabilir document.readymi?

İlgilendiğim bazı konular:

jQuery'nin .on()yöntemi: .on()AJAX için yöntemi oldukça kullanıyorum (tipik olarak dinamik olarak oluşturulmuş DOM öğelerinde). Meli .on()tıklama işleyicileri hep olmak içeride document.ready ?
Performans: Çeşitli javascript / jQuery nesnelerini document.ready içinde veya dışında tutmak daha mı verimli? (Ayrıca, performans farkı önemli mi?)?
Nesne kapsamı: AJAX yüklenen sayfalar can değildi erişim nesneleri içine öncesinde sayfanın document.ready, doğru mu? Yalnızca document.ready dışındaki nesnelere erişebilirler (yani, gerçekten "global" nesneler)?

Güncelleme: Bir iyi uygulama izleyin, hepsi benim javascript (jQuery kütüphanesi ve benim uygulamanın kod) yer almaktadır alt benim HTML sayfasının ve ben kullanıyorum deferböylece benim AJAX yüklü sayfalarda jQuery içeren komut üzerine niteliğini I jQuery kitaplığına bu sayfalardan erişebilir.

— tim peterson
kaynak

2

Çünkü DOM hazır değilse, beklenmedik sonuçlar alabilirsiniz, hepsi bu.

— Robert Harvey

1

2.- Eh i kullanmak dışında konsol tarafından bazı var / işlevini çağırmak için sadece hata ayıklamak ve can

— jd_7

@RobertHarvey ne tür "beklenmedik" sonuçlar? Bir örnek verebilir misiniz?

— tim peterson

3

Henüz DOM'a girmemiş bir öğeyi veya özniteliği değiştirmeye çalışırsınız.

— Robert Harvey

143

Basit bir deyişle,

$(document).readydocumenthazır olduğunda ateşlenen bir olaydır .

JQuery kodunuzu headbölüme yerleştirdiğinizi ve bir domöğeye (bir çapa, bir img vb.) Erişmeye çalıştığınızı varsayalım html, yukarıdan aşağıya yorumlandığı ve jQuery kodunuz olduğunda html öğeleriniz olmadığı için ona erişemeyeceksiniz. koşar.

Bu sorunun üstesinden gelmek için, her jQuery / javascript kodunu (DOM kullanan) $(document).readytüm domöğelere erişilebildiğinde çağrılan işlevin içine yerleştiriyoruz .

Ve jQuery kodunuzu en alta (tüm dom öğelerinden sonra, hemen öncesine </body>) yerleştirdiğinizde bunun nedeni budur.$(document).ready

Yer gerek yoktur oniçeride yöntemle $(document).readyyalnızca kullandığınız zaman onüzerinde yöntemini documentçünkü yukarıda açıklanan aynı sebeple.

    //No need to be put inside $(document).ready
    $(document).on('click','a',function () {
    })

    // Need to be put inside $(document).ready if placed inside <head></head>
    $('.container').on('click','a',function () {
    });

DÜZENLE

Yorumlardan,

$(document).readygörüntüleri veya komut dosyalarını beklemez. $(document).readyVe arasındaki büyük fark bu$(document).load
Yalnızca DOM'a erişen kod hazır işleyicide olmalıdır. Bir eklenti ise, ready olayında olmamalıdır.

— Jashwant
kaynak

@Dipaks Evet, neden olmasın? Biz sadece kullanmaya alışkınız $(document).ready. Bunu

— Jashwant

JQuery'yi içine yüklediğiniz headve öğeler işlendikten sonra komut dosyası olduğunuz sürece, document.readygerekli değildir. Yine de görüntüler özel bir durumdur ...

— elclanrs

@elclanrs Güncellenen soruma bakın. HTML sayfamın alt kısmına jQuery'yi hemen ardından uygulamaya özel kodumla yüklüyorum.

— tim peterson

@Jashwant, dom.ready ile değil arasındaki performans farklarına ne dersiniz? Bunlar alakalı mı?

— tim peterson

1

Tüm jQuerykodu hazır işleyiciye koymayız. Yalnızca DOM'a erişen kod. Bir eklenti ise, ready etkinlikte olmamalı

— Juan Mendes

7

Yanıtlar:

jQuery'nin .on () yöntemi: AJAX için .on () yöntemini oldukça kullanıyorum (dinamik olarak DOM öğeleri oluşturarak). .On () tıklama işleyicileri her zaman belgenin içinde olmalı mı?

Hayır, her zaman değil. JS'nizi belge başlığına yüklerseniz yapmanız gerekecektir. Sayfa AJAX aracılığıyla yüklendikten sonra öğeleri oluşturuyorsanız, yapmanız gerekecektir. Komut dosyası html öğesinin altındaysa, bir işleyici de eklemenize gerek yoktur.

Performans: Çeşitli javascript / jQuery nesnelerini document.ready içinde veya dışında tutmak daha mı verimli? (Ayrıca, performans farkı önemli mi?)?

Değişir. İşleyicileri eklemek aynı miktarda zaman alır, bu sadece sayfanın yüklenirken hemen gerçekleşmesini isteyip istemediğinize veya belgenin tamamı yüklenene kadar beklemesine bağlıdır. Bu nedenle, sayfada başka ne yaptığınıza bağlı olacaktır.

Nesne kapsamı: AJAX yüklü sayfalar, önceki sayfanın belgesindeki nesnelere erişemez. Zaten, doğru mu? Yalnızca document.ready dışındaki nesnelere erişebilirler (yani, gerçekten "global" nesneler)?

Esasen kendi işlevidir, bu nedenle yalnızca genel bir kapsamda (tüm işlevlerin dışında / üzerinde) bildirilen değişkenlere erişebilir veya window.myvarname = '';

— Justin
kaynak

6

JQuery'yi güvenli bir şekilde kullanmadan önce, sayfanın manipüle edilmeye hazır durumda olduğundan emin olmanız gerekir . JQuery ile bunu, kodumuzu bir işleve yerleştirerek ve ardından bu işlevi'e geçirerek gerçekleştiririz $(document).ready(). Fonksiyon biz pas sadece olabilir anonim işlev .

$(document).ready(function() {  
    console.log('ready!');  
});

Bu, belge hazır olduğunda .ready () 'ye aktardığımız işlevi çalıştıracaktır. Burada neler oluyor? Sayfamızın belgesinden bir jQuery nesnesi oluşturmak için $ (document) kullanıyoruz ve ardından bu nesnede .ready () işlevini çağırarak yürütmek istediğimiz işlevi iletiyoruz.

Bu, kendinizi çok şey yaparken bulacağınız bir şey olduğundan, tercih ederseniz, bunun için kısa bir yöntem vardır - $ () işlevi, $ (document) için bir takma ad olarak çift görev yapar. Ready () bir işlevi iletirseniz:

$(function() {  
    console.log('ready!');  
});

Bu iyi bir okuma: Jquery Temelleri

— Tom Sarduy
kaynak

3

(function($){ })(jQuery);Kodunuzu, $ jQuery'nin bu kapanış içinde olacak şekilde saran hangisiyle karıştırılmamalıdır

— John Magnolia

3

.ready () - DOM tam olarak yüklendiğinde yürütülecek bir işlev belirtin.

$(document).ready(function() {
  // Handler for .ready() called.
});

İşte tüm jQuery Yöntemlerinin listesi

$ (Document) .ready () Tanıtımı'nı okuyun

— Dipak
kaynak

3

Gerçekçi olmak gerekirse document.ready, DOM'u doğru bir şekilde işlemekten başka bir şey için gerekli değildir ve her zaman gerekli veya en iyi seçenek değildir. Demek istediğim, örneğin büyük bir jQuery eklentisi geliştirdiğinizde bunu kod boyunca neredeyse hiç kullanmıyorsunuz çünkü onu KURU tutmaya çalışıyorsunuz, bu nedenle DOM'u işleyen ancak çağrılması gereken yöntemlerde mümkün olduğunca soyut yapıyorsunuz. daha sonra. Tüm kodunuz sıkı bir şekilde entegre edildiğinde document.ready, ortaya çıkan tek yöntem genellikle inittüm DOM büyüsünün gerçekleştiği yerdir. Umarım bu sorunuzu yanıtlar.

— Elclanrs
kaynak

0

Document.ready içindeki tüm eylemleri bağlamalısınız, çünkü belge tamamen yüklenene kadar beklemelisiniz.

Ancak, tüm eylemler için işlevler oluşturmalı ve bunları belge içinden çağırmalısınız. Hazır. İşlevler (global nesneleriniz) oluşturduğunuzda, onları istediğiniz zaman çağırın. Dolayısıyla, yeni verileriniz yüklendikten ve yeni öğeler oluşturulduktan sonra, bu işlevleri tekrar çağırın.

Bu işlevler, olayları ve eylem öğelerini bağladığınız işlevlerdir.

$(document).ready(function(){
bindelement1();
bindelement2();
});

function bindelement1(){
$('el1').on('click',function...);
//you might make an ajax call here, then under complete of the AJAX, call this function or any other function again
}

function bindelement2(){
$('el2').on('click',function...);
}

— Pulkit Mittal
kaynak

0

Bir div bağlantısına bir bağlantı ekledim ve tıklamayla bazı görevler yapmak istedim. DOM'da eklenen öğenin altına kodu ekledim ancak çalışmadı. İşte kod:

<div id="advance-search">
   Some other DOM elements
   <!-- Here I wanted to apppend the link as <a href="javascript:;" id="reset-adv-srch"><span class="bold">x</span> Clear all</a>-->
</div>

<script>
  $("#advance-search #reset-adv-srch").on("click", function (){
     alert('Link Clicked');``
  });
</script>

İşe yaramadı. Sonra jQuery kodunu $ (document) .ready içine yerleştirdim ve mükemmel çalıştı. İşte burada.

$(document).ready(function(e) {
    $("#advance-search #reset-adv-srch").on("click", function (){
        alert('Link Clicked');
    });
});

— Daha Güvenli Ahmed
kaynak

-2

ready olayı, DOM (belge nesne modeli) yüklendiğinde gerçekleşir.

Bu olay, belge hazırlandıktan sonra meydana geldiğinden, diğer tüm jQuery olaylarının ve işlevlerinin bulunduğu yer iyi bir yerdir. Yukarıdaki örnekteki gibi.

Ready () yöntemi, bir ready olayı meydana geldiğinde ne olacağını belirtir.

İpucu: ready () yöntemi ile birlikte kullanılmamalıdır.

— Shrikant Shiledar
kaynak