<head>
<!-- data-main attribute tells require.js to load
scripts/main.js after require.js loads. -->
<script data-main="scripts/main" src="scripts/require.js"></script>
</head>
Я рекомендую ( 1 ) загрузить его в голову.
Не стоит включать его в ваш html ( 2 ), потому что он останавливает кеширование. Не говоря уже о том, что вы должны вставлять это везде, и это просто безобразно.
Допустимая альтернатива ( 3 ) (но лично этого не стоит) - создать тег <script> с использованием JavaScript и вставить его в вашу голову. Если это делается в нижней части вашего тела, следует надеяться, что ваш html / css полностью загрузится, прежде чем ваш асинхронный загрузчик запустится.
В качестве приятного бонуса require.js позволяет вам дать указатель на ваш основной скрипт и он загрузит тот, который когда-то требует загрузки. Затем вы можете выполнить большую часть загрузки вашего асинхронного файла в основном скрипте и установить четко определенный набор требований для каждого файла с точки зрения того, что им требуется на странице.
Причины асинхронной загрузки вашего JavaScript включают
- быстрая загрузка исходного HTML / CSS.
- Ваши заголовки остаются "чистыми"
- Ваш javascript и html четко разделены.
- Вы можете динамически загружать файлы на основе обнаружения функций.
- Вы можете четко определить ваши межфайловые зависимости.
- Вы можете загружать библиотеки модульно (например, YUI) вместо загрузки всей библиотеки (например, jQuery).
И этот список можно продолжить. Очень просто и аккуратно включить строку, подобную приведенной выше, в свой общий вид / общий вид или главную страницу.
Расширение динамической загрузки файлов JavaScript на основе обнаружения функций. Я имею в виду, что вы можете просматривать DOM, для которого должны быть загружены файлы JavaScript. Например, если у вас есть <ul class="image-slider"> на вашей странице, вы можете определить это с помощью стандартных селекторов CSS и загрузить файл image-slider.js, чтобы незаметно улучшить его с помощью JavaScript.
Это означает, что вам не нужно вручную включать его на каждой странице с помощью ползунка изображения. Вам не нужно включать на каждой странице по умолчанию, и вы можете использовать одну часть информации (имя класса), чтобы применить визуальный стиль и функциональность.