Javascript BEST PRACTICE - управление повторным использованием скриптов/кода

Из чтения многих статей, таких как Как включить файл JavaScript в другой JavaScript file? - возможно, невозможно включить один скрипт в другой.

Итак, вот мой вопрос - меня беспокоит раздувание JS. или слишком много неиспользуемой загрузки кода со страницами, которые не используют/не нуждаются в ней. Однако иногда мне нужны те же функции на нескольких страницах, но не на всех страницах.

Если мы рассмотрим создание логических разделов онлайн-приложения для объектов, таких как «клиенты» или «элементы», у нас может быть куча кода, характерного для каждого из этих «объектов».

В качестве примера у меня может быть группа «профиля», которая позволяет мне управлять моим профилем, он может иметь несколько div-всплывающих окон, которые используют Ajax, и, ради примера, позволяет сказать У меня есть пара функций, которые управляют моим «адресом доставки», они управляют div-pop-up, они обрабатывают Ajax, специфичные для этой информации. - Скажем, у меня есть 4 функции для этой цели. Но это только часть гораздо большего файла profile.js, который обрабатывает ВСЕ мой «профиль» crud ...

Теперь у меня есть еще один раздел приложения - например, корзина для покупок - где мне нужно разрешить пользователю доступ к раскрывающемуся «отгрузочному адресу» и всем функциям Ajax.

Я думаю, что я хотел бы повторно использовать только те функции из profile.js - потому что это похоже на «плохую форму», чтобы «переписать» код, который делает то же самое, потому что тогда у меня было бы длинное проблемы с долгосрочным кодом - если я внес изменения - я должен помнить везде, где я использовал этот код.

Итак, , если мне осталось вывести «лучшую практику» - учитывая ограничения того, как работают эти технологии, я не могу «вложить» и повторно использовать js, как я делаю сервер включает OR CSS.

Мой код придется разбивать на отдельные файлы, и (теоретически) будет использоваться много меньших .js-файлов

Итак, мой <head> будет выглядеть следующим образом

<head>
<script src='smallfile_1.js'...>
<script src='smallfile_2.js'...>
...
<script src='smallfile_10.js'...>
<head>

и "IF" Мне нужен раздел на другой странице

<head>
<script src='that_other_object_/smallfile_3.js'...>
</head>

... не повторяются ли повторные обращения TTP к этим более мелким файлам? В приложении с интенсивным трафиком - кажется, что сетевые и серверные накладные расходы могут стать проблемой, или просто вытащить гору из кротового холма?

Есть ли 100k запросов для 10 5k файлов, ДЕЙСТВИТЕЛЬНО равно - 100k запросов для 1 файла 50k?

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

Могу ли я получить некоторую обратную связь о том, что делают другие люди в отношении повторного использования кода JS в разных модулях - без создания «огромного» файла, совместно используемого в модулях.

Ответ 1

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

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

Другой способ предотвратить это - создать небольшой серверный файл, который будет динамически комбинировать несколько JavaScript на сервере и обслуживать их, когда клиент запрашивает их, например:

<script src="/resource/js?load=file1,file2,file3" type="text/javascript></script>

Однако этот метод не рекомендуется, так как он поражает кеширование браузера. Поэтому наилучшей практикой является обычно, чтобы поддерживать большой мастер-файл JavaScript, содержащий весь код, необходимый для функционирования сайта, который кэшируется при начальной загрузке страницы.