Куда поместить весь этот код JavaScript jQuery?

Question

Из документации, я нашел этот пример:

Мы можем анимировать любой элемент, например, простое изображение:

<div id="clickme"> 
    Click here 
</div> 
<img id="book" src="book.png" alt="" width="100" height="123" /> 

с элементом изначально показано на рисунке, мы можем скрыть его медленно:

$('#clickme').click(function() { 
    $('#book').fadeOut('slow', function() { 
    // Animation complete. 
    }); 
}); 

Я помню, с 5 лет назад, что вы нИКОГДА не следует когда-либо обратиться к любому элементу, пока он не был определен. До сих пор применяется это правило? Так что я должен был бы поместить весь этот код в нижний колонтитул моей веб-страницы? Или я могу поместить его в отдельный файл и импортировать его в нижний колонтитул? Что лучше?

Answer 1

Рекомендуемый способ сделать это положить весь код инициализации в $(document).ready, например, так:

$(document).ready(function() { 
    $('#foobar').click(function(event) { alert("You Clicked Me!"); }); 
}); 

Answer 2

Вы правы; вы не можете взаимодействовать с элементом DOM до его существования.

У вас есть два варианта:

• Поместите код ниже HTML, как вы предложили.

• Вставьте код в любом месте, но оберните его в $(function() { ... }).
  Эта конструкция будет выполнять функцию в событии загрузки страницы после существования DOM.

Answer 3

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

Answer 4

Лучше всего поместить все элементы SCRIPT в нижней части HTML-документа (непосредственно перед </body> тега . причины:

1. загрузки внешних JS файлов блокирует загрузку других ресурсов (например, изображений)
2. , поскольку JS код выполняется немедленно, то лучше разобрать HTML-код страницы, а затем выполнить код JS после

Вы можете увидеть шаблон HTML5, который демонстрирует эту практику здесь: http://vidasp.net/HTML5-template.html

Answer 5

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

$(function() { /* ... your code goes here ... */ } 

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

Answer 6

Я задал этот вопрос, хотя и по-другому некоторое время назад. Возможно, вы захотите посмотреть ответы, которые я тоже получил - они совсем ...философско:

JQuery - Best way of wiring GUI objects to events?