когда вам нужно использовать $ (document) .ready ()? - PullRequest
12 голосов
/ 15 мая 2011

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

Во всех протестированных мною браузерах вполне приемлемо начинать взаимодействие с элементами html и DOM сразу после закрывающего тега. (Например,

<div id="myID">
 My Div
</div>
<script type="text/javascript">
$('#myID').initializeElement();
</script>

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

Существуют ли сценарии, где требуется $(document).ready()?

Есть ли причины, по которым я не должен писать сценарии инициализации, как продемонстрировано?

Ответы [ 3 ]

10 голосов
/ 15 мая 2011

Основная причина - внешние файлы , которые включены в заголовок.Когда вы включаете файл в <head>, он запускается немедленно.Это означает, что если JavaScript взаимодействует с DOM, его необходимо поместить в Dom Ready.

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

Второе - защитить себя от неясных ошибок браузера, когда вы делаете ошибки.Есть случаи, когда сразу после этого не нужно переходить и манипулировать элементами DOM.(Я смотрю на вас IE6!)

Третья причина - поддерживать ваш код в чистоте.

Смешивание тегов скрипта в вашем HTML делает код спагетти.

some HTML
<script> ... </script>

some HTML
<script> ... </script>

some HTML
<script> ... </script>

some HTML
<script> ... </script>

some HTML
<script> ... </script>

some HTML
<script> ... </script>

some HTML
<script> ... </script>

У нас есть код примерно в десять раз хуже, чем этот.Это правильная боль читать / поддерживать

6 голосов
/ 16 мая 2011

В случае внешних скриптов $ (document) .ready () может быть единственным вариантом.Что касается встроенного скрипта, то он немного другой.

Согласно стандарту HTML 4.01, кажется немного двусмысленным, допустима ли приведенная выше методика инициализации:

http://www.w3.org/TR/html401/interact/scripts.html#h-18.2.4

Сценарии, которые выполняются при загрузке документа, могут динамически изменять содержимое документа.Возможность сделать это зависит от самого языка сценариев (например, оператор «document.write» в объектной модели HTML, поддерживаемой некоторыми поставщиками).

Документы HTML ограничены для соответствия HTML DTD как до, так и после обработки любых элементов SCRIPT.

В черновике HTML 5 кажется очень ясным, что эта практика полностью поддерживается:

http://www.w3.org/TR/html5/scripting-1.html#scripting-1

В следующем примере показано, как элемент сценария можно использовать для определения функции, которая затем используется другими частями документа.Также показано, как элемент script можно использовать для вызова скрипта во время синтаксического анализа документа, в этом случае для инициализации вывода формы.

<script>
 function calculate(form) {
   var price = 52000;
   if (form.elements.brakes.checked)
     price += 1000;
   if (form.elements.radio.checked)
     price += 2500;
   if (form.elements.turbo.checked)
     price += 5000;
   if (form.elements.sticker.checked)
     price += 250;
   form.elements.result.value = price;
 }
</script>
<form name="pricecalc" onsubmit="return false">
 <fieldset>
  <legend>Work out the price of your car</legend>
  <p>Base cost: £52000.</p>
  <p>Select additional options:</p>
  <ul onchange="calculate(form)">
   <li><label><input type=checkbox name=brakes> Ceramic brakes (£1000)</label></li>
   <li><label><input type=checkbox name=radio> Satellite radio (£2500)</label></li>
   <li><label><input type=checkbox name=turbo> Turbo charger (£5000)</label></li>
   <li><label><input type=checkbox name=sticker> "XZ" sticker (£250)</label></li>
  </ul>
  <p>Total: £<output name=result></output></p>
 </fieldset>
 <script>
  calculate(document.forms.pricecalc);
 </script>
</form>
1 голос
/ 15 мая 2011

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

Функция $ (document) .ready () имеет массу преимуществ по сравнению с другими способами получения событий.работать.Прежде всего, вам не нужно помещать какую-либо «поведенческую» разметку в HTML

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...