JavaScript с нуля - [23]
Как только мы создали файл JS, второй (и заключительный) шаг — это связать его со страницей HTML. За это отвечает тег script, а конкретнее — его атрибут src, который указывает на расположение JavaScript-файла:
Example
В этом примере, если файл JavaScript расположен в одном каталоге с HTML, мы можем использовать относительный путь и сослаться напрямую на имя файла. А если этот файл находится в другом каталоге, нам нужно будет соответственно изменить путь:
Example
В этом случае наш файл сценария вложен в три уровня каталогов с именами some, other и folder. Кроме того, мы также можем прибегнуть к использованию абсолютного пути вместо относительного:
Example
Не важно, если пути относительные или абсолютные, — они будут прекрасно работать. В ситуациях же, когда путь между HTML-страницей и сценарием, на который мы ссылаемся, отличается (например, внутри шаблона, серверного включения, сторонней библиотеки и т. д.), безопаснее использовать абсолютный путь.
Итак, какой подход использовать?
У нас есть два основных подхода, определяющих, как и где следует размещать код (рис. 10.4).
Рис. 10.4. Два основных подхода, используемых для работы с кодом JavaScript
Конечный выбор подхода зависит от ответа на следующий вопрос: «Планируется ли использование одного и того же кода в нескольких HTML-документах?»
Считывание и расположение сценариев в документе
Несколькими разделами ранее я описывал выполнения сценариев. Браузер считывает HTML-страницу, начиная сверху и построчно перемещаясь вниз. Когда он достигает тега script, то начинает выполнять содержащийся в нем код. Это выполнение также происходит построчно, начинаясь с верхней части. Все остальные возможные действия страницы на время этого выполнения приостанавливаются. Если тег script ссылается на внешний JS-файл, то прежде, чем начать выполнение этого файла, браузер его загрузит.
При таком линейном считывании документа браузером наблюдается интересные нюансы, влияющие на то, где лучше размещать теги script. Технически их можно разместить в любой части HTML-документа. Тем не менее для этого есть предпочтительное место. Учитывая то, как браузер считывает страницу, и то, что он все блокирует во время выполнения сценариев, следует размещать теги script в нижней части HTML-документа, после всех его элементов.
Если тег script окажется в верхней части документа, то на время его выполнения браузер заблокирует все остальное. В результате если вы начнете загружать большой файл сценария или будете выполнять сценарий, то пользователь сможет увидеть частично загруженную и не отвечающую HTML страницу. До тех пор пока у вас не возникнет реальной потребности в выполнении JavaScript до полного считывания документа, размещайте теги script в конце, как показано в большинстве предыдущих примеров. Есть и еще одно преимущество в расположении скриптов внизу страницы, но о нем я расскажу значительно позднее, когда мы будем говорить о DOM (объектная модель документа) и о том, что происходит в процессе загрузки страницы.
Да, мой код будет использоваться в нескольких документах!
Если ответ да, тогда наверняка лучше будет поместить код в отдельный файл и сделать на него ссылку во всех HTML-страницах, которые должны его выполнять. Первая причина, по которой это стоит сделать, — вы сможете избежать повторения кода на всех этих страницах (рис. 10.5).
Рис. 10.5. Повторение кода — это проблема!
Сопровождение повторяющегося кода — это кошмар, при котором изменение сценария потребует внесения изменений в каждый HTML-документ. Если вы используете некий шаблон или логику SSI, где ваш сценарий содержится только в одном HTML-фрагменте, тогда проблема сопровождения окажется не столь велика.
Вторая причина заключается в размере файла. Если вы дублируете сценарий во множестве HTML-страниц, то каждый раз, когда пользователь загружает одну из этих страниц, он заново загружает весь сценарий. Это не такая уж и проблема, когда речь идет о небольших сценариях, но, как только в коде появляется нескольких сотен строк, размер начинает существенно расти.
Если вы размещаете весь код в одном файле, то все только что упомянутые проблемы у вас уже не возникнут (рис. 10.6).
Рис. 10.6. Весь код в одном месте
Сопровождение кода облегчается, так как его обновление производится только в одном файле. Любой HTML-документ, ссылающийся на этот JS-файл, при загрузке автоматически получает его последнюю версию. Это также позволит браузеру загружать код всего один раз и предоставлять его сохраненную в кэше версию для последующих обращений.
Нет, мой код используется только в одном HTML-документе
Если ваш ответ нет, то можете поступать по своему усмотрению. Вы по-прежнему можете разместить код в отдельном файле и сослаться на него из HTML-документа, но это принесет меньше выгоды, чем в случае с несколькими документами, который мы рассмотрели ранее.
