Загрузка и запуск кода js после завершения загрузки страницы (ненавязчивый способ)

Я хотел бы максимально отделить свой код JS от HTML, и я вижу несколько шаблонов для этого.

1) я могу использовать

$(document).ready(function() {...})

непосредственно перед закрытием тега body

2) я могу просто поставить js-код, например

new FormValidationHandler()

в теге script непосредственно перед закрывающим тегом body

3) Я могу указать внешний файл js, содержащий инициализацию, например $(document)ready или new FormValidationHandler в теге script

4) есть также способ использовать функцию самовызова, но не знаю, соответствует ли она этой проблеме

Мой вопрос в том, какой путь предпочтительнее?

Во-вторых, есть два места, где я могу поместить свои внешние скрипты на веб-страницу:

  • в теге головы
  • в теге body (обычно в конце)

Должен ли заголовок содержать только код, который не должен запускаться при загрузке страницы? Тогда этот код должен быть помещен в тело?


javascript jquery unobtrusive-javascript
person grafthez    schedule 09.11.2011    source источник
comment
Я не думаю, что нужно правильно или неправильно. Но, судя по тоннам и советам, кажется, что вы очень правы в деньгах. Весь код, который должен выполняться ПОСЛЕ загрузки страницы, должен находиться в конце документа (встроенного/внешнего) - так что он не замедляет скорость загрузки страницы, идет последним в виде http-запросов. Используйте встроенный JS, если он будет использоваться ТОЛЬКО на этой странице, и никогда в другом месте (нацеливание на элементы и т. д.), иначе размещайте функции и т. д. во внешних файлах. Я также предпочитаю $(document).ready(function() просто потому, что все программисты будут знать, что происходит и что это значит для кода.   -  person Marco Johannesen    schedule 09.11.2011
comment
Итак, у вас есть тег сценария в конце раздела тела с $(document).ready(...)? Или вы предпочитаете иметь его в отдельном файле и вызывать этот файл через скрипт?   -  person grafthez    schedule 09.11.2011
comment
Я почти всегда стараюсь использовать его в конце тела, если это возможно (некоторые солоуции дают больше гибкости в верхней части страницы). Я использую встроенный скрипт для выбора конкретных элементов страницы и добавления к ним функций/плагинов/виджетов, а также использую внешние скрипты с document.ready для всех моих функций/плагинов/виджетов, которые не относятся к странице :)   -  person Marco Johannesen    schedule 09.11.2011

Ответы (1)


arrow_upward
0
arrow_downward

вот как я люблю делать. Возможно, это не идеально, но мне нравится вот так:

Расположение скрипта в HTML-документе:

Каждый скрипт загружается в конце HTML-документа, непосредственно перед закрывающим текстом.

Есть одно исключение: скрипт, который обрабатывает FOUC (например, modernizr). Этот сценарий должен быть в голове. Других разумных исключений я не вижу.

Организация скриптов:

На мой взгляд, для этого есть два случая: если вы работаете с гипертекстовым документом или веб-приложением (возможно, это может потребовать дополнительных объяснений, но это будет долго: p). Я редко работал над веб-приложениями, поэтому у меня пока нет проверенной организации для этого. Но я думаю, что в веб-приложении вы, вероятно, можете использовать некоторые библиотеки загрузки сценариев, такие как requirejs, и это, вероятно, будет более полезным, чем для простые веб-страницы.

Для гипертекстового документа (большинства веб-страниц) мне нравится различать два типа сценариев: библиотеки и то, что я называю по-французски «скриптом интерфейса» («скрипт связывания», вероятно, может быть хорошим переводом...).

Библиотеки — это, как следует из названия, скрипты, которые загружают библиотеки в среду javascript, но ничего не делают.

скрипт связывания предназначен для связывания этих библиотек с конкретным HTML-документом.

Для меня в идеальном мире должно быть столько библиотечных скриптов, сколько у вас, но только один скрипт связывания для каждого HTML-документа. В этом скрипте вы найдете вызов $(document).ready, если вы используете jQuery, и все содержимое этого скрипта должно быть очень-очень простым. В идеале в функции готовности документа должны быть только такие инструкции, как:

$('my selector').MyPlugin({
    option1:'value',
    option2: 'value'
});

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

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

Внешние файлы или встроенные скрипты?

Лично я предпочитаю использовать внешние файлы для всех скриптов, но обычно я использую один встроенный тег скрипта для объявления некоторых переменных, необходимых для некоторых библиотек (ваш ключ для вашей рекламной службы и т. д.).

Загрузка внешних библиотек

Последний конкретный случай: когда вам нужно загрузить скрипт с другого хоста. Как правило, вы не можете сказать, загрузится скрипт или нет, потому что вы не можете сказать, работает ли другой сервер или нет, и будет ли он работать медленно или быстро... Вы не можете точно сказать, что это за скрипт подойдет, так что это может сломать вашу страницу...

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

Для этого я лично разработал библиотеку, предназначенную для загрузки библиотек (возможно, однажды я опубликую ее на gitHub, когда у меня будет время). Например, я использую этот скрипт для загрузки API-интерфейсов Facebook, Google+ или Twitter или любых других внешних библиотек, таких как счетчик статистики или службы рекламы.

person Nicolas    schedule 10.11.2011