Структура файлов JavaScript и модернизр /yepnope

Question

Структура файлов JavaScript и модернизр /yepnope

Я изучаю всю асинхронную загрузку скриптов с помощью 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г на протяжении всего приложения. В разделе тела документа (другие файлы 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(), но это кажется ненужным дублированием кода.

0

javascript asynchronous modernizr event-driven-design yepnope

Источник

user404623 26 ноя '13 в 07:16

1 ответ

Другие вопросы по тегам javascript asynchronous modernizr event-driven-design yepnope

user1292556 27 ноя '13 в 11:09 2013-11-27 11:09 · Answer 1 · 2013-11-27 11:09

Если я правильно понял ваш вопрос, то вы хотите выполнить сценарии тела после того, как необходимые скрипты были загружены с Modernizr.

Вы могли бы сделать что-то вроде этого:

// Header script
var race_won = false;
var load_body_script = function() {
  race_won = true;
};

Modernizr.load([
    {
        test: ..your condition..,
        yep: ..test success..,
        nope: ..test fail..,
        complete: function() {
            $(document).ready(function() {
                $('.filterDates').myCoolPlugin();
                load_body_script();
            }
        }
    }
]);

// Body script
var body_script = function() {
  // .. your code here ..
}
if (race_won) {
  body_script();
}
else {
  load_body_script = body_script;
}