Я изучаю всю асинхронную загрузку скриптов с помощью Modernizr и yepnope.js, и мне интересно, как я могу адаптировать структуру моего приложения для использования асинхронной загрузки скриптов.
Сейчас структура выглядит примерно так:
...
<head>
<script src=jquery.js></script>
<script src=plugin1.js></script>
<script src=plugin2.js></script>
<script src=plugin3.js></script>
<script src=global.js></script>
</head>
<body>
Этот код находится в файле header.php, который имеет номер require
d во всем приложении. В разделе тела документа (другие файлы PHP) у меня могут быть некоторые файлы JavaScript, подобные этому:
...
<script src=moduleA.js></script>
<script src=someScripts.js></script>
</html>
Вот упрощенный пример того, что могут содержать moduleA.js и someScripts.js:
$(document).ready(function() {
$('.searchDate').myCoolPlugin({ /* some options */ });
});
И некоторые скрипты.js:
$(document).ready(function() {
$('#departureDate, #arrivalDate').myCoolPlugin({ /* some options */ });
});
Если я использую Modernizr, в верхней части страницы я бы удалил другие скрипты плагинов, а в global.js написал бы:
Modernizr.load([
{
test: $.fn.myCoolPlugin,
nope: 'plugin1.js',
complete: function() {
$(document).ready(function() {
$('.filterDates').myCoolPlugin();
}
}
}
]);
Как я могу гарантировать, что myCoolPlugin будет загружен к моменту выполнения moduleA.js и someScripts.js? Я понимаю, что могу обернуть инициализацию плагина в эти файлы с помощью Modernizr.load()
, но это кажется ненужным дублированием кода.