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。

我想要完成的工作如下：

首先加载JQuery和我的JQuery插件
在我的JQuery插件中使用isRetina函数来检查设备是否有视网膜显示器
加载core.min.css
如果没有Retina显示，请加载add_regular.min.css，如果Retina显示，则加载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

我不确定如何实现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 之前等待其中任何一个事件，我不确定它会对内置$(document).ready /类似的 jQuery的产生什么影响。

也就是说，在附加监听器之前，您可以选择检查document.readyState === 'complete'，看看是否应该立即调用。

Answer 2

不确定我是否理解正确，但这应该有效。

默认情况下包含此内容：

<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只会在上面加载并执行后才会触发。

Answer 3

我刚刚浏览.ready()的JQuery文档，显然$(function(){});相当于$(document).ready(function() {});（我不确定我是如何发现这个#ScratchingMyHead的）。

我还看到这个用于NetTuts上的YepNope教程+：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>

我会对此进行测试，如果不起作用，请将其删除。

根据JQuery插件中的测试条件有条件地加载CSS文件

3 个答案: