Когда следует использовать функцию jQuery document.ready?

Мне сказали использовать document.ready, когда я впервые начал использовать Javascript/jQuery, но я никогда не узнал почему.

Может кто-нибудь дать некоторые основные рекомендации, когда имеет смысл обернуть javascript/jquery-код внутри jQuery document.ready?

Некоторые темы, которые меня интересуют:

  • Метод jQuery .on(): я довольно часто использую метод .on() для AJAX (обычно на динамически созданных элементах DOM). Если .on() обработчики кликов всегда внутри document.ready?
  • Производительность. Является ли более эффективным поддерживать различные объекты javascript/jQuery внутри или снаружи document.ready(также значительная разница в производительности?)?
  • Область объекта: страницы, загруженные AJAX, не могут получить доступ к объектам, которые внутри документа на предыдущей странице. уже, правильно? Они могут обращаться только к объектам, которые были снаружи document.ready(т.е. Действительно "глобальными" объектами)?

Обновление:. Чтобы следовать наилучшей практике, весь мой javascript (библиотека jQuery и код моего приложения) находится на внизу моей HTML-страницы, и я использую атрибут defer в скриптах, содержащих jQuery, на моих загруженных AJAX страницах, чтобы я мог получить доступ к библиотеке jQuery на этих страницах.

Ответ 1

Проще говоря,

$(document).ready - событие, которое запускается, когда document готов.

Предположим, что вы поместили свой код jQuery в раздел head и пытаетесь получить доступ к элементу dom (якорь, img и т.д.), Вы не сможете получить к нему доступ, поскольку html интерпретируется сверху вниз, а ваши html-элементы отсутствуют, когда Ваш код JQuery работает.

Чтобы преодолеть эту проблему, мы помещаем каждый код jQuery/javascript (который использует DOM) в функцию $(document).ready которая вызывается при доступе ко всем элементам dom.

И по этой причине, когда вы размещаете свой код jQuery внизу (после всех элементов dom, непосредственно перед </body>), нет необходимости в $(document).ready

Там нет необходимости размещать on методе внутри $(document).ready только при использовании on способе по document из - за той же самой причине я объяснил выше.

    //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 () {
    });

РЕДАКТИРОВАТЬ

Из комментариев,

  1. $(document).ready не ждет изображений или скриптов. Вот большая разница между $(document).ready и $(document).load

  2. Только код, который обращается к DOM, должен быть в готовом обработчике. Если это плагин, он не должен быть в готовом событии.

Ответ 2

Ответы:

Метод jQuery.on(): я довольно часто использую метод .on() для AJAX (динамическое создание элементов DOM). Если обработчики кликов .on() всегда внутри документа. уже?

Нет, не всегда. Если вы загрузите JS в головке документа, вам понадобится. Если вы создаете элементы после загрузки страницы через AJAX, вам нужно будет. Вам не нужно, если script находится под элементом html, который вы также добавляете обработчиком.

Производительность. Является ли более эффективным поддерживать различные javascript/jQuery? объекты внутри или снаружи document.ready(также значительная разница в производительности?)?

Это зависит. Для прикрепления обработчиков потребуется столько же времени, это просто зависит, хотите ли вы, чтобы это произошло сразу после загрузки страницы, или если вы хотите, чтобы он дождался загрузки всего документа. Таким образом, это будет зависеть от того, что вы делаете на странице.

Область объекта: страницы, загруженные AJAX, не могут обращаться к объектам, находящимся внутри документ предыдущей страницы. уже, правильно? Они могут получить доступ только к объектам которые находились за пределами document.ready(т.е. действительно "глобальные" объекты)?

По сути, это собственная функция, поэтому он может только получить доступ к vars, объявленным в глобальной области (вне/выше всех функций) или с помощью window.myvarname = '';

Ответ 3

Прежде чем вы сможете безопасно использовать jQuery, вам нужно убедиться, что страница находится в состоянии, в котором она готова. С помощью jQuery мы выполняем это, помещая наш код в функцию, а затем передавая эту функцию $(document).ready(). Функция, которую мы передаем, может быть просто анонимной функцией .

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

Это приведет к выполнению функции, которую мы передаем .ready(), как только документ будет готов. Что здесь происходит? Мы используем $(document) для создания объекта jQuery из нашего документа страницы, а затем вызываем функцию .ready() для этого объекта, передавая ему функцию, которую мы хотим выполнить.

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

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

Это хорошее чтение: Основы JQuery

Ответ 5

Чтобы быть реалистичным, document.ready не требуется ни для чего другого, кроме как правильно манипулировать DOM, и это не всегда необходимо или лучший вариант. Я имею в виду, что когда вы разрабатываете большой плагин jQuery, например, вы вряд ли используете его во всем коде, потому что вы пытаетесь сохранить его DRY, поэтому вы максимально абстрактны в методах, которые управляют DOM, но предназначены для вызова позже. Когда весь ваш код плотно интегрирован, единственный метод, открытый в document.ready, обычно init, где происходит вся магия DOM. Надеюсь, это ответит на ваш вопрос.

Ответ 6

Вы должны привязать все действия в document.ready, потому что вам нужно дождаться, когда документ будет полностью загружен.

Но вы должны создавать функции для всех действий и вызывать их из документа document.ready. Когда вы создаете функции (ваши глобальные объекты), назовите их, когда захотите. Поэтому, как только ваши новые данные будут загружены и будут созданы новые элементы, вызовите эти функции еще раз.

Эти функции - это те, в которых вы связали события и элементы действий.

$(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...);
}

Ответ 7

Я добавил ссылку на div и захотел выполнить некоторые задачи при нажатии. Я добавил код под добавленным элементом в DOM, но он не работал. Вот код:

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

Это не сработало. Затем я поместил код jQuery внутри $(document).ready и работал отлично. Вот оно.

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

Ответ 8

Он готов к событию, когда была загружена DOM (объектная модель документа).

Поскольку это событие происходит после того, как документ готов, это хорошее место для всех других событий и функций jQuery. Как в приведенном выше примере.

Метод ready() указывает, что происходит, когда происходит событие готовности.

Совет. Метод ready() не должен использоваться вместе с.