Jquery $ (document) .ready () vs domReady eklentisi gerekli mi?

RequireJS kullanıyorum ve DOM'a hazır bir şey başlatmam gerekiyor. Şimdi, RequireJS domReadyeklentiyi sağlıyor , ancak zaten jQuery'ye ihtiyacım olduğu için kullanabileceğim jQuery'lere $(document).ready()sahibiz.

Bu yüzden iki seçeneğim var:

1. domReadyEklentiyi kullanın :

   require(['domReady'], function (domReady) {
       domReady(function () {
           // Do my stuff here...
       });
   });

2. Kullanım $(document).ready():

   $(document).ready(function() {
       // Do my stuff here...
   });

Hangisini seçmeliyim ve neden?

Her iki seçenek de beklendiği gibi çalışıyor gibi görünüyor. JQuery'ye güvenmiyorum çünkü RequireJS sihrini yapıyor; diğer bir deyişle, RequireJS komut dosyalarını dinamik olarak ekleyeceği için, dinamik olarak istenen tüm komut dosyaları yüklenmeden önce DOM hazır olmasından endişeleniyorum. Oysa RequireJS, sadece jQuery'ye ihtiyaç duyduğumda ek JS'ye bir yük ekleyecektir domReady.

Sorular

• JQuery'lere sahip olabileceğimiz halde RequireJS neden bir domReadyeklenti sağlıyor $(document).ready();? Başka bir bağımlılık dahil etmenin bir avantajı görmüyorum.
• Sadece bir ihtiyacı beslemek içinse, neden çapraz tarayıcı AJAX için bir tane sağlamıyorsunuz?

Bildiğim kadarıyla domReady, belge hazır olduktan sonra gerektiren bir modül getirilmeyecek veya çalıştırılmayacak ve siz de aynısını jQuery ile yapabilirsiniz:

require(['jQuery'], function ($) {
    $(document).ready(function () {
        // Do my stuff here...
    });
});

: Sorumu daha net olmak gerekirse gerektiren arasındaki fark nedir domReadyya jQuery?

Görünüşe göre tüm kilit noktalar çoktan vurulmuş, ancak birkaç ayrıntı çatlaklardan düştü. Esasen:

domReady

Hem bir eklenti hem de bir modüldür. Bunu gereksinimler dizisine eklerseniz !, modülünüz DOM ile etkileşim "güvenli" olana kadar çalışmayacaktır:

define(['domReady!'], function () {
    console.info('The DOM is ready before I happen');
});

Yükleme ve çalıştırmanın farklı olduğunu unutmayın; tüm dosyalarınızın mümkün olan en kısa sürede yüklenmesini istiyorsanız, içeriğin yürütülmesi zamana duyarlıdır.

Öğesini atlarsanız, !bu sadece normal bir modül olan ve DOM ile etkileşime girmek için güvenli hale gelmeden önce çalışmayan bir geri arama alabilen bir işlev olur:

define(['domReady'], function (domReady) {
    domReady(function () {
        console.info('The DOM is ready before I happen');
    });
    console.info('The DOM might not be ready before I happen');        
});

Eklenti olarak domReady kullanırken avantaj

Bağımlı olan bir modüle bağlı olan domReady!kodun çok önemli bir avantajı vardır: DOM'un hazır olmasını beklemesine gerek yoktur!

Bir modüle, B'ye bağlı olan A kod bloğumuz olduğunu varsayalım domReady!. DOM hazır olmadan Modül B yüklemesi tamamlanmayacak. Buna karşılık, A, B yüklenmeden önce çalışmayacaktır.

domReadyB'de normal bir modül olarak kullanacak olsaydınız, A'nın da buna bağlı olması domReadyve kodunu bir domReady()işlev çağrısı içine sarması gerekir .

Dahası, bu domReady!aynı avantaja sahip olduğu anlamına gelir $(document).ready().

DomReady ve $ (document) .ready () arasındaki farklar

Her ikisi de, DOM'un hazır olup olmadığını / ne zaman hazır olduğunu esasen aynı şekilde tespit eder.

JQuery'nin yanlış zamanda ateşleme korkusu

jQuery, DOM jQuery'den önce yüklense bile herhangi bir hazır geri aramayı tetikleyecektir (kodunuz hangisinin ilk olduğunu önemsememelidir.).

Ana sorunuzu cevaplama denemesi:

Jquery'lerimiz varken neden requirejsbir domReadyeklenti sağlıyor $(document).ready();?

Aslında iki farklı şey yapıyorlar. RequireJS'nin domReadybağımlılığı, bu modülün, çalıştırılmadan önce DOM'nin tamamen yüklenmesini gerektirdiğini belirtir (ve bu nedenle, isterseniz uygulamanızdaki herhangi bir sayıda modülde bulunabilir), $(document).ready()bunun yerine, DOM şu durumlarda geri arama işlevlerini çalıştırır. Yükleme tamamlandı.

Fark ince görünebilir, ancak şunu düşünün: DOM'a bir şekilde bağlanması gereken bir modülüm var, bu yüzden domReadyonu modül tanımlama zamanında bağlayabilir ve ona bağlı olabilirim ya $(document).ready()da sonuna a koyabilirim modül için bir başlatma işlevine geri çağrı ile. İlk yaklaşımı temizleyiciyi arayacağım.

Bu arada, DOM hazır olduğu anda gerçekleşmesi gereken bir $(document).ready()olayım varsa, olay, özellikle sizin kodunuzun bağımlılıkları olması koşuluyla, RequireJS'nin yükleme modüllerine bağlı değildir. onu arayan karşılandı.

Ayrıca RequireJS'yi jQuery ile kullanmanız gerekmediğini de dikkate almaya değer. DOM erişimine ihtiyaç duyan (ancak jQuery'ye dayanmayan) herhangi bir kitaplık modülü, bu durumda yine de yararlı olacaktır domReady.

Mermilerinize görünüm sırasına göre cevap vermek:

• İkisi de aynı şeyi başarır
• Herhangi bir nedenle jquery ile ilgili çekinceleriniz varsa domReady kullanın.
• Doğru, sadece jQuery kullanın
• Çünkü herkes jQuery kullanmıyor
• Kabul ediyorum, sadece jQuery kullan
• Eklentiler tanımı gereği 'bir ihtiyacı besler'.
• Cross Browser ajax bir şey değildir. Alanlar Arası? Muhtemelen vardır ve yoksa beslenmeye gerek yoktur.
• , -, -, - Tamam

Söz konusu olduğunda, bunu fazla düşünüyorsunuz. DomReady'de javascript çalıştırmak için bir mekanizmadır. JQuery'niz olmasaydı, domReady eklentisini savunurdum. JQuery'ye sahip olduğunuzdan, zaten mevcut olan bir şeyi yapmak için daha fazla komut dosyası yüklemeyin.

Netlik Güncellemesi

DomReady eklentisi , belge 'hazır' olduğunda çağrılacak işlevleri toplar . Zaten yüklenmişse, hemen çalıştırırlar.

JQuery, işlevleri toplar ve ertelenmiş bir nesneyi 'hazır' olan doma bağlar . Dom hazır olduğunda, ertelenmiş nesne çözümlenecek ve işlevler çalışacaktır. Alan zaten "hazır" ise, ertelenen zaten çözülmüş olacak ve böylece işlev hemen yürütülecektir.

Bu, etkili bir şekilde aynı şeyi yaptıkları anlamına gelir.

Birden fazla modül içeren requirej'ler ile biraz deney yaptıktan sonra, domReady'yi kullanmanızı öneririm .

Requjs tarafından birden çok modül yüklendiğinde $ (document) .ready (...) ile ilişkili işlevin çağrılmadığını fark ettim . Dom'un tüm requirejs kodu çalıştırılmadan önce hazırlandığından ve jquery ready geri arama işleyicisinin kullanıcı tanımlı işlevle, yani ana modül kodu içinde bağlanmadan önce çağrıldığından şüpheleniyorum.

require(['jquery',
    'underscore',
    'text!some_template.html',
    './my_module_1',
    './my_module_2',
    'domReady',
    'other_dependency_1',
    'other_dependency_2'
    ], function($, _, someTemplate, myModule1, myModule2, domReady) {

    $(document).ready(function() {
        console.info('This might never be executed.'); 
        console.info('Dom might get ready before requirejs would load modules.');
    });

    domReady(function () {
        console.info('This runs when the dom gets ready and modules are loaded.');
    });
});

Bunu ana girişin bir parçası olarak yaptığımı fark ettim, böylece tüm javascript'im DOM'un hazır olduğunu ve jquery'nin yüklendiğini garanti ediyor. Bunun ne kadar harika olduğundan emin değilim, bu yüzden herhangi bir geri bildirimde bulunabilirsiniz ama işte benim main.js:

require(['domReady!'], function(domReady){
    console.log('dom is ready');
    require(['jquery', 'bootstrap'], function(){
        console.log('jquery loaded');
        require(['app'], function(app){
            console.log('app loaded');
        });
    });
});