Условная загрузка файлов CSS на основе условий тестирования в плагине JQuery

Question

Я ищу наилучший подход к условной загрузке некоторых файлов на основе определенного набора условий.

У меня есть три CSS файлы и два JavaScript-файлы, которые я в настоящее время погрузочные как так:

<link href="core.min.css" rel="stylesheet" type="text/css"> 
<link href="add_regular.min.css" rel="stylesheet" type="text/css"> 
<link href="add_retina.min.css" rel="stylesheet" type="text/css"> 
<script type="text/javascript" src="jquery.min.js"></script> 
<script type="text/javascript" src="jquery-plugin.min.js"></script> 

Как видно четвертый файл JQuery и пятый мой JQuery плагин. Внутри плагина JQuery есть ряд функций, которые похожи на тесты, например. isMobile, isRetina, isPhone и т. Д. Однако давайте сосредоточимся на isRetina.

То, что я пытаюсь сделать это следующим образом:

1. Load JQuery и мой JQuery плагин первый
2. Использование isRetina функции внутри моего JQuery плагин, чтобы проверить, есть ли устройство сетчатки дисплей
3. нагрузки core.min.css
4. нагрузки add_regular.min.css если не Сетчатка дисплей, или загрузить add_retina.min.css, если дисплей Retina

В настоящее время я загружаю все три файла CSS, и я бы не хотел этого делать, потому что у меня есть куча других файлов CSS, и я хочу загрузить их, поскольку мой плагин JQuery определяет, какой из них лучше всего по моему выше пример. Например, у меня может быть phone.min.css, который я бы хотел загрузить после выполнения другого теста с помощью функции моего плагина isPhone.

Я рассматриваю, используя YepNope и делать что-то вроде этого:

<script type="text/javascript" src="yepnope.min.js"></script> 
<script> 
yepnope([{ 
    load: ['jquery.min.js', 'jquery-plugin.min.js'], 
    test : $.myplugin.isRetina(), 
    yep : ['core.min.css', 'add_retina.min.css'], 
    nope : ['core.min.css', 'add_regular.min.css'], 
    complete : function(){ 
     //my jquery plugin constructor here 
     $(selector).myplugin(options); 
    } 
}]); 
</script> 

Однако, даже если выше подход является правильным, я не знаю, как реализовать document.ready как конструктор моего плагина должен запускается только тогда, когда DOM готов.

Мне хотелось бы получить некоторые идеи о том, как я могу это сделать, используя YepNope или любое другое решение.

Cheers.

Answer 1

Я как раз собирался над JQuery Документами для .ready(), и, по-видимому $(function(){}); эквивалентно $(document).ready(function() {}); (я не знаю, как я только открываю для себя этого #ScratchingMyHead).

Я также видел, что это используется в учебнике YepNope по NetTuts +: http://net.tutsplus.com/tutorials/javascript-ajax/easy-script-loading-with-yepnope-js/.

Так что я предполагаю, что мой прежний код становится то, что вы видите ниже, должны решить эту проблему:

<script type="text/javascript" src="yepnope.min.js"></script> 
<script> 
yepnope([{ 
    load: ['jquery.min.js', 'jquery-plugin.min.js', 'core.min.css'], 
    test : $.myplugin.isRetina(), 
    yep : 'add_retina.min.css', 
    nope : 'add_regular.min.css', 
    complete : function(){ 
     //my jquery plugin constructor added to JQuery DOM Ready Stack 
     $(function(){ 
      $(selector).myplugin(options); 
     });   
    } 
}]); 
</script> 

Я проверить это и удалить это, если он не работает.

Answer 2

Я не уверен, как реализовать document.ready, так как конструктор моего плагина должен запускаться только тогда, когда DOM готов.

Есть два соответствующих событий

window.addEventListener('load', function() { 
    // code runs when document+resources have finished loading 
}); 

и

document.addEventListener('DOMContentLoaded', function() { 
    // code runs when document has finished parsing, but before resources loaded 
}); 

Если вы ждете либо из этих событий, прежде чем импортировать JQuery, я не уверен, какой эффект это будет иметь на jQuery's inbuilt $(document).ready/аналогичный.

У вас есть возможность проверить document.readyState === 'complete' перед подключением слушателей, чтобы увидеть, следует ли вам сразу звонить.

Answer 3

Не уверен, что я правильно вас понимаю, но это должно сработать.

Включите эту опцию по умолчанию:

<link href="core.min.css" rel="stylesheet" type="text/css"> 
<script type="text/javascript" src="jquery.min.js"></script> 
<script type="text/javascript" src="jquery-plugin.min.js"></script> 
<script type="text/javascript"> 
    yepnope([{ 
     load: ['jquery.min.js', 'jquery-plugin.min.js'], 
     test : $.myplugin.isRetina(), 
     yep : ['core.min.css', 'add_retina.min.css'], 
     nope : ['core.min.css', 'add_regular.min.css'], 
     complete : function(){ 
      //my jquery plugin constructor here 
      $(selector).myplugin(options); 
      //Remove the mask here. 
     } 
    }]); 
    // Feel free to call ready() here 
    $(document).ready(function(){ 
     // whatever you want here 
    }); 
</script> 

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