2

我正在寻找基于一组特定条件有条件地加载某些文件的最佳方法。

我有三个 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 插件中的函数来检查设备是否有视网膜显示
  3. 加载core.min.css
  4. add_regular.min.css如果不是 Retina 显示则加载，如果add_retina.min.cssRetina 显示则加载

目前我正在加载所有三个 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或任何其他解决方案来解决这个问题。

干杯。

4

3 回答 3

0

我不确定如何实现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'在附加侦听器之前进行检查，看看是否应该立即调用。

于 2013-08-28T14:34:51.447 回答
0

不确定我是否理解正确，但这应该可以。

默认情况下包括此：

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

于 2013-08-28T14:50:23.823 回答
0

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

我还在YepNopeNetTuts+ 的教程中看到了这一点：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>

如果它不起作用，我将对此进行测试并删除它。

于 2013-08-28T15:25:41.180 回答