Birden fazla $ (document) .ready (function () {…}) olabilir mi; bölümler?

Başlangıçta çok fazla fonksiyonum varsa, hepsi tek bir altında olmak zorunda mı:

$(document).ready(function() {

veya bu tür birden fazla ifadem olabilir mi?

Birden fazla olanınız olabilir, ancak her zaman yapılacak en iyi şey değildir. Okunabilirliği ciddi şekilde etkileyeceğinden, onları fazla kullanmamaya çalışın. Bunun dışında tamamen yasal. Aşağıya bakın:

http://www.learningjquery.com/2006/09/multiple-document-ready

Şunu deneyin:

$(document).ready(function() {
    alert('Hello Tom!');
});

$(document).ready(function() {
    alert('Hello Jeff!');
});

$(document).ready(function() {
    alert('Hello Dexter!');
});

Bunun buna eşdeğer olduğunu göreceksiniz, yürütme sırasına dikkat edin:

$(document).ready(function() {
    alert('Hello Tom!');
    alert('Hello Jeff!');
    alert('Hello Dexter!');
});

Ayrıca, bir $(document).readyblok içinde tanımlanan bir fonksiyonun başka bir bloktan çağrılamayacağını da belirtmek gerekir $(document).ready, sadece bu testi çalıştırdım:

$(document).ready(function() {
    alert('hello1');
    function saySomething() {
        alert('something');
    }
    saySomething();

});
$(document).ready(function() {
    alert('hello2');
    saySomething();
}); 

çıktı:

hello1
something
hello2

Birden çok kullanabilirsiniz. Ancak bir belgenin içinde birden fazla işlev de kullanabilirsiniz. Zaten:

$(document).ready(function() {
    // Jquery
    $('.hide').hide();
    $('.test').each(function() {
       $(this).fadeIn();
    });

    // Reqular JS
    function test(word) {
       alert(word);
    }
    test('hello!');
});

Evet, kolayca birden fazla bloğunuz olabilir. Değerlendirme sırası beklediğiniz gibi olmayabileceğinden, aralarındaki bağımlılıklara dikkat edin.

Evet , birden fazla $ (belge) .ready () çağrısı yapmak mümkündür. Ancak, hangi yolla infaz edileceğini bildiğinizi sanmıyorum. (kaynak)

Evet mümkündür ancak bir div #mydiv'i ve her ikisini de kullanabilirsiniz.

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

//and

$("#mydiv").ready(function(){});

Evet, mükemmel tamam. Ama bir sebep olmadan yapmaktan kaçının. Örneğin, javascript dosyalarım dinamik olarak oluşturulduğunda global site kurallarını ayrı sayfalardan ayrı olarak bildirmek için kullandım, ancak tekrar tekrar yapmaya devam ederseniz okumayı zorlaştıracaksınız.

Ayrıca bazı yöntemlere başka bir yöntemden erişemezsiniz. jQuery(function(){}); çağrıdan bu yüzden bunu yapmak istememenizin başka bir nedeni.

Eski ile window.onloadolsa da, bir işlev her belirlediğinizde eskisini değiştireceksiniz.

Evet yapabilirsin.

Birden çok belgeye hazır bölüm, özellikle onu kullanan aynı sayfadan çıkmış başka modülleriniz varsa kullanışlıdır. Eski window.onload=funcdeklarasyonda, çağırılacak bir işlevi her belirlediğinizde, eskisinin yerini alır.

Şimdi belirtilen tüm işlevler, hangi belge hazır bölümünde belirtildiklerinden bağımsız olarak sıraya alınır / istiflenir (biri onaylayabilir mi?).

Ben gitmek için en iyi yolu adlandırılmış işlevlere geçiş yapmak olduğunu düşünüyorum (bu konuda daha fazla bilgi için bu taşma kontrol edin) . Bu şekilde onları tek bir olaydan arayabilirsiniz.

Şöyle ki:

function firstFunction() {
    console.log("first");
}

function secondFunction() {
    console.log("second");
}


function thirdFunction() {
    console.log("third");
}

Bu şekilde, bunları tek bir hazır fonksiyona yükleyebilirsiniz.

jQuery(document).on('ready', function(){
   firstFunction();
   secondFunction();
   thirdFunction();

});

Bu, console.log dosyasına aşağıdakileri çıktılar:

first
second
third

Bu şekilde işlevleri diğer etkinlikler için yeniden kullanabilirsiniz.

jQuery(window).on('resize',function(){
    secondFunction();
});

Çalışan sürüm için bu kemanı kontrol edin

Yasaldır, ancak bazen istenmeyen davranışlara neden olur. Örnek olarak, MagicSuggest kütüphanesini kullandım ve projemin bir sayfasına iki MagicSuggest girişi ekledim ve girişlerin her başlatılması için ayrı belge hazır işlevleri kullandım. İlk Giriş başlatma işe yaradı, ancak ikincisi değil ve aynı zamanda hata vermedi, İkinci Giriş görünmedi. Bu nedenle, her zaman bir Belge Hazır Fonksiyonu kullanmanızı öneririm.

Belgeye dahil işlevleri html dosyalarının içine yerleştirebilirsiniz. İşte jquery kullanan bir örnek:

Dosya: test_main.html

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="jquery-1.10.2.min.js"></script>
</head>

<body>
    <div id="main-container">
        <h1>test_main.html</h1>
    </div>

<script>
    $(document).ready( function()
    {
        console.log( 'test_main.html READY' );
        $("#main-container").load("test_embed.html");
    } );
</script>

</body>
</html>

Dosya: test_embed.html

<h1>test_embed.html</h1>
<script>
    $(document).ready( function()
    {
        console.log( 'test_embed.html READY' );
    } );
</script>

Konsol çıkışı:

test_main.html READY                       test_main.html:15
test_embed.html READY                      (program):4

Tarayıcı şunu gösterir:

test_embed.html

Bunu aşağıdaki şekilde de yapabilirsiniz:

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
 $(document).ready(function(){
     $("#hide").click(function(){
     $("#test").hide();
     });
     $("#show").click(function(){
     $("#test").show();
     });
 });
</script>
</head>

<body>
<h2>This is a test of jQuery!</h2>
<p id="test">This is a hidden paragraph.</p>
<button id="hide">Click me to hide</button>
<button id="show">Click me to show</button>
</body>

önceki yanıtlar, tek bir .ready bloğunun içinde birden çok adlandırılmış işlev veya .ready bloğunda tek bir adlandırılmamış işlev kullanılarak .ready bloğunun dışında başka bir adlandırılmış işlev kullanıldığını gösterdi. Bu soruyu .ready bloğu içinde birden fazla isimsiz fonksiyona sahip olmanın bir yolu olup olmadığını araştırırken buldum - sözdizimini doğru alamadım. Sonunda anladım ve test kodumu göndererek başkalarının sahip olduğum aynı sorunun cevabını bulmalarına yardımcı olacağını umdum