Представьте себе веб-приложение, в котором есть десятки групп страниц (pg1, pg2,...), и некоторым из этих групп страниц нужен только код JavaScript, специфичный только для них, но не для всего приложения. Например, некоторые визуальные исправления для window.resize() могут иметь отношение только к pg2, но нигде больше.
Вот несколько возможных решений:
1/Централизованный: наличие одного файла script для всего приложения, которое касается всех групп страниц. Очень легко узнать, присутствует ли соответствующий объект DOM, и поэтому все нерелевантные страницы просто выполняют незначительные дополнительные if(). Самое большое преимущество в том, что все JS загружается один раз для всего веб-приложения, и никакая модификация HTML-кода не требуется. Недостатком является то, что дополнительные дополнительные проверки добавляются к нерелевантным страницам.
2/Смешанный: централизованный script проверяет наличие конкретной функции на странице и запускает ее, если она существует. Например, мы могли бы добавить
if (typeof page_specific_resize === 'function') page_specific_resize();
Определенная группа страниц в этом случае будет иметь:
<script>
function page_specific_resize() {
//....
}
</script>
Преимущество в том, что код существует только для релевантных страниц и поэтому не проверяется на каждой странице. Недостатком является дополнительный размер для результатов HTML во всей группе страниц. Если существует несколько строк кода, группа страниц может загружать дополнительный script, специфичный для него, но затем мы добавляем http-вызов, чтобы, возможно, сохранить несколько килограммов в централизованном script.
Какая практика? Просьба прокомментировать эти решения или предложить собственное решение. Добавление некоторых ресурсов для поддержки ваших заявлений о том, что лучше (рассмотреть производительность и простоту обслуживания), было бы замечательно. Будет отображен наиболее подробный ответ. Спасибо.