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

107

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

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

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

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

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

— Тим Петерсон
источник

2

Потому что, если DOM не готов, вы можете получить неожиданные результаты, вот и все.

— Роберт Харви

1

2.- Ну, я использую снаружи только для отладки и могу вызвать некоторые var / функции с консоли,

— jd_7

@RobertHarvey, какие "неожиданные" результаты? можешь привести пример?

— Тим Петерсон

3

Вы пытаетесь изменить элемент или атрибут, который еще не вошел в DOM.

— Роберт Харви

143

Простыми словами,

$(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метод 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 () {
    });

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

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

$(document).readyне ждет изображений или скриптов. В этом большая разница между $(document).readyи$(document).load
Только код, который обращается к DOM, должен быть в готовом обработчике. Если это плагин, его не должно быть в событии готовности.

— Jashwant
источник

@Dipaks Да, а почему бы и нет? Мы просто очень привыкли к этому $(document).ready. Смотрите это

— Jashwant

Пока вы загружаете jQuery в headи скрипты после элементов, которыми управляют, document.readyне требуется. Однако изображения - это особый случай ...

— elclanrs

@elclanrs См. мой обновленный вопрос. Сразу после этого я загружаю jQuery внизу своей HTML-страницы с кодом для конкретного приложения.

— Тим Петерсон

@Jashwant, как насчет разницы в производительности dom.ready и not? Это актуально?

— Тим Петерсон

1

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

— Хуан Мендес

7

Ответы:

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

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

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

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

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

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

— Джастин
источник

6

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

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

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

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

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

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

— Том Сардуй
источник

3

Не путать с тем, (function($){ })(jQuery);что обертывает ваш код, так что $ - это jQuery внутри этого закрытия

— Джон Магнолия

3

.ready () - укажите функцию, которая будет выполняться при полной загрузке DOM.

$(document).ready(function() {
  // Handler for .ready() called.
});

Вот список всех методов jQuery

Читайте о представлении $ (document) .ready ()

— Дипак
источник

3

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

— Elclanrs
источник

0

Вы должны связать все действия в 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...);
}

— Pulkit Mittal
источник

0

Я добавил ссылку на 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');
    });
});

— Сейфер Ахмед
источник

-2

Событие готовности происходит при загрузке DOM (объектной модели документа).

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

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

Совет: метод ready () не следует использовать вместе с.

— Шрикант Шиледар
источник