Когда я впервые начал использовать 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 на этих страницах.
javascript
jquery
dom
event-handling
document-ready
Тим Петерсон
источник
источник
Ответы:
Простыми словами,
Предположим, вы разместили свой код jQuery в
head
разделе и пытаетесь получить доступ кdom
элементу (привязке, img и т. Д.), Вы не сможете получить к нему доступ, потому чтоhtml
он интерпретируется сверху вниз, а ваши элементы html отсутствуют, когда ваш код jQuery бежит.Чтобы преодолеть эту проблему, мы помещаем каждый код jQuery / javascript (который использует DOM) внутри
$(document).ready
функции, которая вызывается, когдаdom
доступны все элементы.И по этой причине, когда вы помещаете свой код jQuery внизу (после всех элементов dom, непосредственно перед
</body>
), нет необходимости в$(document).ready
Нет необходимости размещать
on
метод внутри$(document).ready
только тогда, когда вы используетеon
метод on,document
по той же причине, которую я объяснил выше.РЕДАКТИРОВАТЬ
Из комментариев,
$(document).ready
не ждет изображений или скриптов. В этом большая разница между$(document).ready
и$(document).load
Только код, который обращается к DOM, должен быть в готовом обработчике. Если это плагин, его не должно быть в событии готовности.
источник
$(document).ready
. Смотрите этоhead
и скрипты после элементов, которыми управляют,document.ready
не требуется. Однако изображения - это особый случай ...jQuery
код в готовый обработчик. Только код, который обращается к DOM. Если это плагин, то его не должно быть вready
событииОтветы:
Нет, не всегда. Если вы загрузите свой JS в заголовок документа, вам это необходимо. Если вы создаете элементы после загрузки страницы через AJAX, вам потребуется. В этом нет необходимости, если скрипт находится ниже элемента html, который вы также добавляете в обработчик.
Это зависит. Столько же времени потребуется для присоединения обработчиков, это просто зависит от того, хотите ли вы, чтобы это происходило немедленно, когда страница загружается, или вы хотите, чтобы он ждал, пока не загрузится весь документ. Так что это будет зависеть от того, что еще вы делаете на странице.
По сути, это собственная функция, поэтому он может обращаться только к переменным, объявленным в глобальной области (вне / выше всех функций) или с помощью
window.myvarname = '';
источник
Прежде чем вы сможете безопасно использовать jQuery, вам необходимо убедиться, что страница находится в состоянии, когда она готова к манипулированию. С помощью jQuery мы достигаем этого, помещая наш код в функцию, а затем передавая эту функцию в
$(document).ready()
. Передаваемая нами функция может быть просто анонимной функцией .Это запустит функцию, которую мы передаем в .ready (), когда документ будет готов. Что тут происходит? Мы используем $ (document) для создания объекта jQuery из документа нашей страницы, а затем вызываем функцию .ready () для этого объекта, передавая ему функцию, которую мы хотим выполнить.
Поскольку это то, чем вы часто занимаетесь, для этого есть сокращенный метод, если вы предпочитаете - функция $ () выполняет двойную функцию как псевдоним для $ (document) .ready (), если вы передаете ей функцию:
Это хорошее чтение: Основы JQuery
источник
(function($){ })(jQuery);
что обертывает ваш код, так что $ - это jQuery внутри этого закрытия.ready () - укажите функцию, которая будет выполняться при полной загрузке DOM.
Вот список всех методов jQuery
Читайте о представлении $ (document) .ready ()
источник
Чтобы быть реалистичным,
document.ready
не требуется ничего, кроме точного управления DOM, и это не всегда необходимо или лучший вариант. Я имею в виду, что когда вы разрабатываете большой плагин jQuery, например, вы вряд ли используете его во всем коде, потому что вы пытаетесь сохранить его СУХИМ, поэтому вы максимально абстрагируетесь в методах, которые манипулируют DOM, но предназначены для вызова позже. Когда весь ваш код тесно интегрирован, единственный доступный методdocument.ready
- это, как правило,init
вся магия DOM. Надеюсь, что это ответ на ваш вопрос.источник
Вы должны связать все действия в document.ready, потому что вам нужно дождаться полной загрузки документа.
Но вы должны создать функции для всех действий и вызывать их из document.ready. Когда вы создаете функции (ваши глобальные объекты), вызывайте их, когда хотите. Поэтому после загрузки новых данных и создания новых элементов вызовите эти функции еще раз.
Именно к этим функциям вы привязали события и элементы действий.
источник
Я добавил ссылку на div и хотел выполнить некоторые задачи одним щелчком мыши. Я добавил код под добавленным элементом в DOM, но он не работал. Вот код:
Это не работает. Затем я поместил код jQuery в $ (document) .ready, и он отлично сработал. Вот.
источник
Событие готовности происходит при загрузке DOM (объектной модели документа).
Поскольку это событие происходит после того, как документ готов, это хорошее место для всех других событий и функций jQuery. Как в примере выше.
Метод ready () указывает, что происходит при наступлении события готовности.
Совет: метод ready () не следует использовать вместе с.
источник