Это именно то, для чего предназначен пакет типа RequireJS .Использование загрузчика модулей, такого как RequireJS, позволяет асинхронно загружать несколько файлов JS и определять обратные вызовы при загрузке файлов.
Вот простой пример ...
Вместо загрузки вашего jQuery и / или других файлов JS, единственным <script> для загрузки является скрипт RequireJS.
<script data-main="js/app" src="js/require.js"></script>
Атрибут data-main указывает RequireJS загрузить файл в /js/app.js, который содержит ваши параметры конфигурации RequireJS.Вот пример /js/app.js:
requirejs.config({
"baseUrl": "js/lib",
"paths": {
"app": "../app",
"jquery": "//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min",
"jqueryMobile": "//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min"
}
});
// Load the main app module to start the app
requirejs(["app/main"]);
В этом случае /js/app.js используется в основном для настройки путей.Свойство app указывает RequireJS, где искать JS вашего конкретного приложения, а свойство jquery указывает RequireJS путь к URL Google CDN для jQuery.Наконец, используйте метод requirejs(), чтобы загрузить файл .js приложений.Обратите внимание, что все пути не указаны .js.
На этом этапе RequireJS будет искать ваш app JS на app/main.js.Создайте файл в /js/app/ с именем main.js - теперь у вас есть файл /js/app/main.js.
Этот файл будет загружать как файлы jQuery, так и jQuery Mobile из CDN Google, асинхронно и содержатьостальная часть логики вашего приложения.Вот пример /js/app/main.js:
define(["jquery", "jqueryMobile"], function($) {
//jQuery and jQuery Mobile have been loaded.
$(function() {
// Do stuff with jQuery and jQuery Mobile
});
});
Какой эффект это имеет?Давайте посмотрим на сетевой водопад, чтобы увидеть, как загружаются файлы:
На приведенной выше диаграмме асинхронная загрузка jQuery и jQuery Mobile.
По аналогичной демонстрации см. Пример RequireJS jQuery .