Ненавязчивый простой Javascript с организацией нескольких событий DOMContentLoaded

Question

Может быть, это глупый вопрос, но я очень запутался с JavaScript. Я следую этой организации кода с максимально ненавязчивым JavaScript. Я строю веб-сайт в Ruby on Rails, который использует Google Maps.

Мой сценарий: предположим, у меня ДЕЙСТВИТЕЛЬНО огромный сайт, на котором на разных страницах мне нужно запускать сценарии JavaScript, которые выполняют некоторые действия.

Проблема в том, что мне нужно добавить ВСЕ код JavaScript моего веб-сайта в браузер пользователя независимо от того, какую страницу пользователь посещает. Например, допустим, у меня есть страница A, которая использует огромный код JavaScript, и страница B, которая использует небольшой код JavaScript. Насколько я понимаю, на странице B пользователь должен будет получить ВСЕ код JavaScript (то есть для обеих страниц A и B). Разве это не практично?

Более того, для обеих страниц JavaScript инициируется document.addEventListener("DOMContentLoaded", function, false); функция. Тем не менее, функция страницы A предполагает, что есть div с именем "pageA" (который используется в качестве ссылки для его изменения или добавления элементов с помощью js-скриптов), и аналогично функция страницы B предполагает, что есть div с именем " страницаБ". Следовательно, когда я на странице BI получаю js ошибку, что нет элемента "pageA". Как я могу избежать этого?

Учитывая тот факт, что для каждой отдельной страницы мне нужно загрузить пользователя со всем моим кодом JavaScript (то есть для всех страниц), как я могу инициировать (то есть запускать сразу при загрузке страницы, а не после события пользователя) конкретный код JavaScript без каких-либо таких ошибок? Я действительно смущен!

Wooho очень быстрые ответы, спасибо, ребята! Но я никогда не говорил, что пишу весь код js в одном файле. Вместо этого я использую организацию RoR! (который, кстати, объединяет все файлы в один файл). Чтобы прояснить мою проблему, в разных файлах я инициирую события для страницы A и события для страницы B (или C и т. Д.). Код срабатывает, как только происходит событие DOMContentLoaded. Однако, когда пользователь находится на странице B, я не хочу запускать события для страницы A. Или аналогичным образом, я хочу загрузить только js для страницы B (чтобы не происходило событие для страницы A). Как я могу это сделать?

PS: Если вы думаете, что название лучше, не стесняйтесь предложить его!

Answer 1

Если вы храните свой код Javascript в одном файле, его нужно загрузить только один раз (и, возможно, даже один раз скомпилировать, см. Это), когда пользователь запрашивает свою первую страницу вашего сайта. Тогда браузер будет использовать кэшированную копию, если вы не запретите кэширование (плохая конфигурация вашего веб-сервера может сделать это).

Когда вы делаете что-то вроде (JQuery):

$('#nosuchid').something();

или например

$('.nosuchclass').each(function(i, el) { ... });

не будет никакой ошибки и никакого эффекта, если в вашей разметке не будет совпадений. Если вы используете, скажем, document.getElementById(), он вернется null если элементы не совпадают, и вам придется обработать этот случай. Если вы сделаете это правильно, ошибок не будет.

Как вы можете себе представить, пропущенный код не требует времени для выполнения, поэтому нет никаких оснований ожидать проблем с производительностью.