Когда вы добавляете Javascript в тело, когда в голове и при использовании doc.load?

Возможный дубликат:
Где разместить Javascript в файле HTML?
Должен ли я писать script в теле или в заголовке html?

Я всегда задавался вопросом, в основном потому, что при создании страниц я всегда сталкивался с проблемами, основываясь на следующем:

Когда вы пишете свой javascript

В <head>
В <body>
с $(document).ready()

Я мог бы быть глупым, но у меня было несколько раз, когда мой JavaScript (/jQuery) не был выполнен из-за неправильного места или команды yes или no doc.ready(). Так что мне действительно интересно.

То же самое относится к команде jQuery и 'var'

Ответ 1

$(document).ready() просто гарантирует, что все элементы DOM загружаются до загрузки javascript.

Если это не важно

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

<div id="map"></div>
<script type="text/javascript">document.getElementById('map').style.opacity = 0;</script>

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

Когда это имеет значение

Однако, если вы загружаете свои скрипты в элементе <head>, большая часть вашего DOM не загружается. Этот пример не будет работать:

<script type="text/javascript">document.getElementById('map').style.opacity = 0;</script>
<div id="map"></div>

не будет, так как карта div не была загружена.

Безопасное решение

Вы можете избежать этого, просто подождите, пока загрузится весь DOM:

<script type="text/javascript">$(document).ready(function () { 
    document.getElementById('map').style.opacity = 0;
});
</script>
<div id="map"></div>

Существует много статей, которые объясняют это, а также jQuery.

Ответ 2

Современной "лучшей практикой" она выглядит так:

Поместите скрипты в <head>, когда они должны произойти до того, как страница начнет отображаться. Примерами являются такие вещи, как библиотеки HTML 5 shim или Modernizr.
Поместите скрипты в "готовые" обработчики, когда ограниченный контроль над тем, как импортируется script. Такие вещи, как утилиты, которые могут быть включены на странице, чтобы ненавязчиво добавить функции, обычно используют "готовые" обработчики, потому что они не могут быть уверены в том, как они будут использоваться.
Поместите скрипты в конец <body>, если вы можете избежать этого во всех других случаях.

Иногда вы оказываетесь зависимостями на страницах, которым требуются вещи, которые вы хотели бы загрузить в конце элемента body. Это нежелательная ситуация, но если вы не можете избежать этого, что может заставить скрипты загружаться в <head>, а не в конце <body>.

Хорошо загружать вещи в конце документа, потому что браузеры оценивают содержимое тегов <script> при их загрузке. (Есть некоторые "современные" способы избежать этого, но они попадают на более сложную территорию.)

Решение о том, когда использовать "готовых" обработчиков (или "загрузчиков", если на то пошло) немного отличается от решения о том, где положить тег <script>. Если у вас есть внутристраничные виджеты из серверной системы шаблонов, которые генерируют (нежелательно, но что вы можете сделать?), Например, ссылки jQuery, то вам нужно импортировать jQuery в верхней части страницы, хотя другой код может отложить инициализацию до "готовых" обработчиков. То есть решение о том, когда использовать "готовый", связано с тем, желает ли ваш script полагаться на его импорт на страницу в нужную точку или если он хочет убедиться, что правильная вещь происходит независимо от того, где размещается тег <script>.

Ответ 3

Это вопрос того, когда вам нужен код для выполнения.

Если вы собираетесь манипулировать деревом DOM (например, перемещать элементы вокруг /show -hide и т.д.), и вы помещаете свой код в начало вашего документа, ваши элементы не будут присутствовать, когда ваш код будет выполнен, поэтому ваш код не будет работать.

В этом случае вы можете поместить свой код в начало документа и вызвать его, когда документ DOM готов, $(document).ready()

Ввод кода в конце вашего документа редко необходим, я могу подумать о том, что это кнопка google plus +1, для которой требуется поместить script после последней кнопки +1, поэтому вы просто привязываете ее к в конце вашего документа.