Да, мой код будет использоваться в нескольких документах!
Если ответ да, тогда наверняка лучше будет поместить код в отдельный файл и сделать на него ссылку во всех HTML-страницах, которые должны его выполнять. Первая причина, по которой это стоит сделать, — вы сможете избежать повторения кода на всех этих страницах (рис. 10.5).
Рис. 10.5. Повторение кода — это проблема!
Сопровождение повторяющегося кода — это кошмар, при котором изменение сценария потребует внесения изменений в каждый HTML-документ. Если вы используете некий шаблон или логику SSI, где ваш сценарий содержится только в одном HTML-фрагменте, тогда проблема сопровождения окажется не столь велика.
Вторая причина заключается в размере файла. Если вы дублируете сценарий во множестве HTML-страниц, то каждый раз, когда пользователь загружает одну из этих страниц, он заново загружает весь сценарий. Это не такая уж и проблема, когда речь идет о небольших сценариях, но, как только в коде появляется нескольких сотен строк, размер начинает существенно расти.
Если вы размещаете весь код в одном файле, то все только что упомянутые проблемы у вас уже не возникнут (рис. 10.6).
Рис. 10.6. Весь код в одном месте
Сопровождение кода облегчается, так как его обновление производится только в одном файле. Любой HTML-документ, ссылающийся на этот JS-файл, при загрузке автоматически получает его последнюю версию. Это также позволит браузеру загружать код всего один раз и предоставлять его сохраненную в кэше версию для последующих обращений.
Нет, мой код используется только в одном HTML-документе
Если ваш ответ нет, то можете поступать по своему усмотрению. Вы по-прежнему можете разместить код в отдельном файле и сослаться на него из HTML-документа, но это принесет меньше выгоды, чем в случае с несколькими документами, который мы рассмотрели ранее.
В такой ситуации вполне подойдет размещение всего кода полностью в HTML-файле. В этом аспекте код из большинства примеров написан внутри HTML-документа. Примеры рассматриваемых кодов не предполагают их использования для множественных страниц и также большие размеры, при которых для повышения читаемости может потребоваться размещение кода в отдельном файле.
КОРОТКО О ГЛАВНОМ
Теперь вы увидели, что решение даже такого простого вопроса, как размещение кода, требует многостраничных объяснений. Добро пожаловать в мир HTML и JavaScript, где нет четкого деления на то, что такое хорошо и что такое плохо. Возвращаясь к сути этого урока, стоит отметить, что типичный HTML-документ будет содержать много файлов сценариев, загружаемых из внешних источников. Некоторые из этих файлов будут вашими, некоторые же будут взяты из сторонних ресурсов.
Напомню и о смешанном подходе, когда в вашем HTML-документе содержится не только ссылка на отдельный JS-файл, но и сам JS-код. Такой подход тоже достаточно распространен. В конце концов, только вам решать, какой именно подход использовать. Надеюсь, что эта глава предоставила вам достаточно информации, чтобы вы могли выбирать подходы осознанно. В главе 35 «События загрузки страницы и прочее» мы еще больше углубимся в пройденную в этой главе тему, рассмотрев на примерах связанные с загрузкой страниц и некоторые особые атрибуты, которые привносят в этот процесс свои сложности. Но пока не будем о них думать.
Если у вас появились вопросы, уверенно задавайте их на форуме https://forum.kirupa.com. Я и другие разработчики будем рады вам помочь!
ЧАСТЬ II. Это объектно ориентированный мир, приятель!
Глава 11. Вывод сообщений в консоль
При написании кода возможны две ситуации. В первой вас будет терзать любопытство: а запустится ли только что написанный вами код? Во второй вы будете знать, что код выполняется, но при этом выполняется некорректно. Что-то не так… Но где же…
В обеих ситуациях вам понадобится дополнительное вˆидение действий кода. Неизменным подходом для получения такого вˆидения является использование метода alert:
let myButton = document.querySelector("#myButton");
myButton.addEventListener("click", doSomething, false);