jQuery document.ready vs kendinden arama anonim işlevi

137

Bu ikisi arasındaki fark nedir.

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

Bu her iki işlev de aynı anda mı çağrılıyor? Biliyorum, document.ready tüm HTML sayfası tarayıcı tarafından işlendiğinde tetiklenecek ama 2. fonksiyonu hakkında (kendi kendine anonim fonksiyonu). Tarayıcının sayfanın oluşturulmasını tamamlaması bekleniyor mu veya karşılaşıldığında çağrılıyor mu?

javascript jquery

— Ashit Vora
kaynak

18

Değer için, $(function() {});eşdeğer$(document).ready(function() {});

— Ian Henry

1

Kendiliğinden arama anonim işlevi, her karşılaşıldığında yürütülür. Ayrıca, belgenin ekranda oluşturulması ve bellekte nesne modeli oluşturulması da ilişkisizdir.

— Anurag

related: Neden anonim işlevi tanımlar ve jQuery'yi argüman olarak iletir? omurga ile hangi desende kullanılacak

— Bergi

4

Etkin bir şekilde cevapladıklarında sorularınızın cevaplarını gerçekten kabul etmelisiniz. Kabul oranınız çok düşük.

— leigero

İlkini yapmanın jQuery dışı yolu şudur: document.addEventListener ('domContentLoaded', function () {...});

— Evan Thompson

112

$(document).ready(function(){ ... }); veya kısa $(function(){...});

Bu İşlev, örneğin öğeleri sorgulamayaDOM is ready başlayabileceğiniz anlamına gelir . DOM'un gerçekten hazır olduğundan emin olmak için farklı tarayıcılarda farklı yollar kullanır..ready()
(function(){ ... })();

Bu, tarayıcı sizin yorumunuzu yaparken kendini en kısa sürede çağıran bir işlevden başka bir şey değildir ecma-/javascript. Bu nedenle, DOM elementsburada başarılı bir şekilde hareket edebilmeniz pek olası değildir .

— JANDY
kaynak

1

@NimChimpsky kafam karıştı (function () {}); $ (function () {}) ile.

— Yanlışın zıttısın

Ben (function(){ ... })();herhangi bir JS kodu ile ilgili olarak en kısa sürede çalışmıyor , kafam karıştı ? Eğer alert()SIAF içinde veya dışında bir şey söyleseydiniz, etki aynı olmaz mıydı?

— skube

2

@skube Evet, herhangi bir JS kodu ayrıştırıcı okur okumaz, ancak SIAF'ın önünde bir "$" olup olmadığı konusunda karışıklığınız olabilir. Öyleyse ve bu site jQuery kullanıyorsa, bu, jQuery belgesinin kısaltılmış formudur. Zaten yardımcı fonksiyon, DOM kullanılabilir olduğunda bir kez çalışacak şekilde zamanlanacak. Yardımcı işlevi kendisi kısa sürede okumak gibi çalışır, ancak işlevi ile temin olmaz.

— Neil Monroe

46

(function(){...})(); Javascript'te karşılaşır karşılaşmaz yürütülür.

$(document).ready()belge yüklendikten sonra yürütülür. $(function(){...});için bir kısayoldur $(document).ready()ve aynı şeyi yapar.

— Michal
kaynak

25

$(document).ready(function() { ... });bu işlevi readybelgenin olayına bağlar , böylece, dediğin gibi, belge yüklendiğinde olay tetiklenir.
(function($) { ... })(jQuery);aslında bir Javascript yapısıdır ve tüm bu kod parçası jQuerynesneyi function($)bir parametre olarak geçirir ve işlevi çalıştırır, bu nedenle bu fonksiyonun içinde $her zaman jQuerynesneyi ifade eder . Bu, ad boşluğu çakışmalarının vb. Çözümlenmesine yardımcı olabilir.

Böylece # 1 belge yüklendiğinde çalıştırılırken # 2 hemen çalıştırılırken jQuerynesne $steno olarak adlandırılır .

— Alan Christopher Thomas
kaynak

25

DOM (Belge nesne modeli) JavaScript kodunun yürütülmesine hazır olduğunda aşağıdaki kod yürütülür.

$(document).ready(function(){
  // Write code here
});

Yukarıdaki kod için kısa el:

$(function(){
  // write code here
});

Aşağıda gösterilen kod, kendi kendini çağıran bir anonim JavaScript işlevidir ve tarayıcı onu yorumlar yorumlamaz yürütülür:

(function(){
  //write code here
})();   // It is the parenthesis here that call the function.

Aşağıda gösterilen jQuery kendini çağırma işlevi, genel jQuery nesnesini argüman olarak iletir function($). Bu, $bir tanım için küresel kapsamı geçmeye gerek kalmadan kendi kendini çağırma işlevi içinde yerel olarak kullanılabilir. jQuery, kullanılan tek kitaplık değildir $, bu nedenle olası adlandırma çakışmalarını azaltır.

(function($){
  //some code
})(jQuery);

— JSON C11
kaynak

2

Javascript kapaklarının çok basit, açık ve özlü açıklaması.

— KOD

16

Belge "DOM" oluşturulduktan sonra zaten çalıştırılır. Kendiliğinden çağrılan işlevler <head>, DOM oluşturulmadan önce eklenirse anında çalışır .

— srigi
kaynak

6

Gereksiz bir düşüşe karşı koymak için +1. Ancak cevabınızda ufak bir sorun var. Kendiliğinden başlatma işlevi ayrıştırılırken bulunduğu her yerde yürütülür ve zorunlu olarak içinde olması gerekmez <head>ve ilk DOM oluşturulduktan sonra kurallar farklı değildir.

— Anurag