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

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

0 голосов
/ 09 ноября 2011

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

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

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

перед закрытием тега body

2) Я могу просто поставить код js как 

new FormValidationHandler()

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

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

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

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

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

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

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

1 Ответ

0 голосов
/ 10 ноября 2011

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

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

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

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

Организация сценариев:

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

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

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

Сценарий связывания создан для связи этих библиотек с конкретным документом HTML.

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

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

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

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

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

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

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

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

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

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

...