Можете ли вы иметь несколько $ (document) .ready (function () {…}); разделы?

Если у меня много функций при запуске, все ли они должны быть под одним:

$(document).ready(function() {

или я могу иметь несколько таких утверждений?

Вы можете иметь несколько, но это не всегда самое подходящее. Старайтесь не злоупотреблять ими, так как это серьезно повлияет на читабельность. Кроме этого, это совершенно законно. Смотрите ниже:

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

Попробуйте это:

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

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

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

Вы обнаружите, что это эквивалентно этому, обратите внимание на порядок выполнения:

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

Также стоит отметить, что функцию, определенную в одном $(document).readyблоке, нельзя вызвать из другого $(document).readyблока, я только что запустил этот тест:

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

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

вывод был:

hello1
something
hello2

Вы можете использовать несколько. Но вы также можете использовать несколько функций внутри одного документа.

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

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

Да, вы можете легко иметь несколько блоков. Просто будьте осторожны с зависимостями между ними, поскольку порядок оценки может не соответствовать ожидаемому.

Да, возможно иметь несколько вызовов $ (document) .ready (). Тем не менее, я не думаю, что вы можете знать, каким образом они будут выполнены. (источник)

Да, это возможно, но вы можете лучше использовать div #mydiv и использовать оба

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

//and

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

Да, это нормально. Но избегайте этого без причины. Например, я использовал его для объявления глобальных правил сайта отдельно от отдельных страниц, когда мои файлы JavaScript создавались динамически, но если вы будете продолжать делать это снова и снова, это затруднит чтение.

Также вы не можете получить доступ к некоторым методам из другого jQuery(function(){});вызова, так что это еще одна причина, по которой вы не хотите этого делать.

window.onloadХотя со старым вы будете заменять старый каждый раз, когда указали функцию.

Да, ты можешь.

Разделы с несколькими документами особенно полезны, если у вас есть другие модули, использующие ту же страницу, что и они. Со старым window.onload=funcобъявлением, каждый раз, когда вы указывали функцию для вызова, она заменяла старую.

Теперь все указанные функции поставлены в очередь / сложены (кто-то может подтвердить?) Независимо от того, в каком разделе готовых документов они указаны.

Я думаю, что лучший способ - это переключиться на именованные функции (проверьте этот переполнение для получения дополнительной информации по этому вопросу) . Таким образом, вы можете позвонить им с одного события.

Вот так:

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

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


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

Таким образом, вы можете загрузить их в одну функцию готовности.

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

});

Это выведет следующее в ваш console.log:

first
second
third

Таким образом, вы можете повторно использовать функции для других событий.

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

Проверьте эту скрипку для рабочей версии

Это законно, но иногда это вызывает нежелательное поведение. В качестве примера я использовал библиотеку MagicSuggest и добавил два входа MagicSuggest на страницу моего проекта и использовал отдельные функции готовности документа для каждой инициализации входных данных. Первая инициализация Входа работала, но не вторая и тоже не выдавала ошибки, Второй Вход не появлялся. Поэтому я всегда рекомендую использовать одну функцию готовности документа.

Вы можете даже вкладывать готовые функции документа во включенные HTML-файлы. Вот пример использования jquery:

Файл: 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>

Файл: test_embed.html

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

Консольный вывод:

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

Браузер показывает:

test_embed.html

Вы также можете сделать это следующим образом:

<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>

предыдущие ответы показали использование нескольких именованных функций внутри одного блока .ready или одной безымянной функции в блоке .ready с другой именованной функцией за пределами блока .ready. Я нашел этот вопрос, исследуя, есть ли способ иметь несколько неназванных функций внутри блока .ready - я не смог получить правильный синтаксис. Я наконец понял это и надеялся, что, разместив свой тестовый код, я помогу другим в поиске ответа на тот же вопрос, что и у меня.