Безопасно ли вызывать методы jQuery до DOMReady?

У нас есть проект, в котором jQuery объединен с нашим основным JS-файлом приложения javascript, и мне было интересно, безопасно ли вызывать методы jQuery до DOMReady?

Я вижу, что многие веб-сайты предлагают запускать ваш javascript jQuery после DOMReady, например:

$(function(){
  $.each(myObject, function(index, val) {
    ...
  });
});

Однако это, по-видимому, задерживает выполнение скрипта, что иногда вызывает проблемы с другими функциями приложения. Поскольку jQuery уже включен в тот же файл JS (вверху), не будет ли безопасно запускать методы jQuery, не дожидаясь DOMReady?

$.each(myObject, function(index, val) {
  ...
});

В моих тестах это работает нормально, но я просто хочу убедиться, что я не оставлен на произвол судьбы браузера. Я предполагаю, что можно запускать методы jQuery, если они ниже определения jQuery и если это не действия, связанные с DOM. Спасибо за любой вклад.


javascript jquery domready
person suncat100    schedule 15.07.2015    source источник
comment
если вы не выполняете какие-либо манипуляции с DOM, вы можете безопасно выполнять любой код сценария, а не только код jQuery. Кроме того, если упомянутый вами файл сценария находится внизу страницы, то в любом случае DOM будет готов к моменту загрузки вашего файла javascript.   -  person vinayakj    schedule 15.07.2015
comment
Если вы взаимодействуете с любыми элементами, которые появляются после скрипта, он не будет работать правильно. Если элементы, с которыми вы взаимодействуете, появляются перед сценарием, все должно быть в порядке.   -  person    schedule 15.07.2015

Ответы (3)


arrow_upward
1
arrow_downward

Вы можете делать любые вызовы jQuery до DOMReady. Следует иметь в виду, что если вы ссылаетесь на элементы DOM, исполняемый код будет применяться только к элементам, уже существующим в DOM.

Например:

<div class="item">

</div>
<script>
    console.log(jQuery('.item').length); // It will output 1
</script>
<div class="item">

</div>
<script>
    console.log(jQuery('.item').length); // It will output 2
</script>

Использование события DOMReady для инициализации — это просто практика, позволяющая убедиться, что все элементы существуют в DOM.

person Tasos K.    schedule 15.07.2015

arrow_upward
1
arrow_downward

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

Вы можете сделать это, поместив тег jQuery <script> перед тегом JS <script>. Или, если вы связываете свой JS вместе, просто убедитесь, что jQuery сначала связан.

Следует отметить, что хотя вы можете использовать методы jQuery, как только jQuery загрузится, некоторые элементы (для селекторов) могут быть еще недоступны, в зависимости от того, где вы разместили тег JS <script> (или, если быть более точным, когда ваш код выполняется)... поэтому, если ваш код полагается на DOM, ожидание "готовности" DOM ​​может быть неплохой идеей.

Примечание. Если вам просто нужно $.each объект, вам не нужно полагаться на jQuery, любой из следующих вариантов будет работать без каких-либо зависимостей lib:

Для поддержки старых браузеров (IE8-)

for(var prop in myObject) {
  if(myObject.hasOwnProperty(prop)) {
    console.log('The value of '+ prop +' in myObject is '+ myObject[prop]);
  } 
}

Для новых браузеров (IE9+)

Object.keys(myObject).forEach(function(prop) {
  console.log('The value of '+ prop +' in myObject is '+ myObject[prop]);
});
person Benjamin Solum    schedule 15.07.2015

arrow_upward
0
arrow_downward

Если вы уверены, что элемент, который вы будете вызывать с помощью jquery, уже существует на этом шаге, вы можете безопасно писать код там.

Например, вы можете написать свои селекторы jquery и привязку событий сразу после записи элемента в виде html.

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

person Amr Elgarhy    schedule 15.07.2015