基於JQuery插件中測試條件的CSS文件的有條件加載

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. 加載jQuery和我的jQuery插件第一
2. 使用isRetina我的jQuery插件內部函數來檢查設備是否具有Retina顯示屏
3. 負載core.min.css
4. 負載add_regular.min.css如果不是視網膜顯示，或負載add_retina.min.css如果視網膜顯示

目前我正在加載所有三個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或任何其他解決方案來解決此問題。

乾杯。

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的內置$(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只會在上面加載並執行時觸發。