Подтвердить что ты не робот

Должен ли я разделить свой javascript на несколько файлов?

Я привык работать с Java, в которой (как мы знаем) каждый объект определяется в собственном файле (вообще говоря). Мне это нравится. Я думаю, что это упрощает работу с кодом и управление им.

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

Короче говоря, неуместно ли испортить мои скрипты в несколько файлов?

4b9b3361

ОТВЕТЫ

Ответ 1

Здесь есть много правильных ответов, в зависимости от размера вашего приложения и того, к кому вы его доставляете (кем я имею в виду предполагаемые устройства и т.д.), и сколько работы вы можете сделать на стороне сервера для обеспечения того, чтобы вы ориентировались на правильные устройства (это еще далеко от 100% жизнеспособных для большинства нерабочих смертных).

При создании приложения "классы" могут жить в своих файлах, к счастью.
При разбиении приложения на файлы или при работе с классами с конструкторами, которые слишком много принимают (например, для создания экземпляров других классов), круговые ссылки или тупиковые ссылки являются серьезной проблемой.
Есть несколько шаблонов, чтобы справиться с этим, но лучше всего, конечно, сделать ваше приложение с DI/IoC в виду, так что циркулярных ссылок не произойдет.
Вы также можете изучить require.js или другие загрузчики зависимостей. Насколько сложным вам нужно стать, зависит от того, насколько велико ваше приложение, и насколько вы бы хотели, чтобы все было так.

При обслуживании вашего приложения базовая линия для обслуживания JS заключается в объединении всех необходимых вам сценариев (в правильном порядке, если вы собираетесь создавать экземпляры, которые предполагают наличие другого материала) и обслуживать их как один файл в в нижней части страницы.

Но эта базовая линия.
Другие методы могут включать "ленивую/отложенную" загрузку.
Загрузите все материалы, необходимые для того, чтобы страница работала вверх.
Между тем, если у вас есть апплеты или виджеты, которым не нужна 100% их функциональности при загрузке страницы, и на самом деле, они требуют взаимодействия с пользователем или требуют задержки во времени, прежде чем что-либо делать, а затем загрузите сценарии для этих виджеты - отложенное событие. Загрузите script для виджета с вкладками в точке, где пользователь нажимает на мышку на вкладке. Теперь вы загрузили только те сценарии, которые вам нужны, и только когда это необходимо, и никто не заметит крошечного запаздывания при загрузке.

Сравните это с людьми, пытающимися собрать 40 000 линейных приложений в одном файле.
Только один HTTP-запрос и только одна загрузка, но время синтаксического анализа/компиляции теперь становится заметной частью секунды.

Конечно, ленивая загрузка не является оправданием для оставления каждого класса в собственном файле.
В этот момент вы должны упаковывать их вместе в модули и обслуживать файл, который будет запускать весь виджет/апплет/независимо (если нет других логических мест, где функциональность не нужна дольше, и она скрыта за дальнейшими взаимодействиями).

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

Ответ 2

Из-за времени загрузки вы всегда должны пытаться сделать ваши скрипты одним, большим, файлом. ОДНАКО, если вы используете minifier (что вам нужно), они могут объединить несколько исходных файлов в один для вас. Таким образом, вы можете продолжать работу с несколькими файлами, а затем минимизировать их в один файл для распространения.

Основное исключение - публичные библиотеки, такие как jQuery, которые вы всегда должны загружать из общедоступных CDN (скорее всего пользователь уже загрузил их, поэтому их не нужно снова загружать). Если вы используете общедоступный CDN, всегда имеете резервную копию для загрузки с вашего собственного сервера, если это не удается.

Как отмечено в комментариях, настоящая история немного сложнее:

Сценарии могут быть загружены синхронно (<script src="blah"></script>) или асинхронно (s=document.createElement('script');s.async=true;...). Синхронные скрипты блокируют загрузку других ресурсов до их загрузки. Так, например:

<script src="a.js"></script>
<script src="b.js"></script>

запросит a.js, дождитесь его загрузки, затем загрузите b.js. В этом случае, очевидно, лучше комбинировать a.js с b.js и нагрузить их одним махом.

Аналогично, если a.js имеет код для загрузки b.js, у вас будет такая же ситуация независимо от того, являются ли они асинхронными или нет.

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

(function(d){
    var s=d.getElementsByTagName('script')[0],f=d.createElement('script');
    f.type='text/javascript';
    f.async=true;
    f.src='a.js';
    s.parentNode.insertBefore(f,s);
    f=d.createElement('script');
    f.type='text/javascript';
    f.async=true;
    f.src='b.js';
    s.parentNode.insertBefore(f,s);
})(document)

Это намного сложнее, но будет загружать как a.js, так и b.js, не блокируя друг друга или что-то еще. В конце концов атрибут async будет поддерживаться должным образом, и вы сможете сделать это так же легко, как загрузка синхронно. В конце концов.

Ответ 3

Здесь есть две проблемы: a) простота разработки b) производительность на стороне клиента при загрузке активов JS

Что касается развития, модульность никогда не бывает плохим; есть также автозагружаемые фреймворки Javascript (например requireJS и AMD), которые вы можете использовать, чтобы помочь вам управлять своими модулями и их зависимостями.

Однако для решения второго вопроса лучше объединить весь ваш Javascript в один файл и его минимизировать, чтобы клиент не тратил слишком много времени на загрузку всех ваших ресурсов. Существуют инструменты (requireJS), которые позволяют вам делать это (например, объединить все ваши зависимости в один файл).

Ответ 4

В зависимости от протокола, который вы используете сейчас. Если вы используете http2, я предлагаю вам разбить файл js. Если вы используете http, я советую вам использовать мини файл js.

Вот пример веб-сайта с использованием http и http2

Спасибо, надеюсь, что это поможет.

Ответ 5

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