如何指定yepnope.js放置已加载脚本的位置？

Question

我有点JS菜鸟。

这是一个粗糙的示例，但它说明了我的问题。 yepnope运行良好，但是它在堆栈顶部添加了yep脚本（jquery.selectBoxIt.min.js）。 问题是，是否将加载的脚本放在JQuery库之前的加载堆栈的顶部。 问题是它要依靠jQuery才能运行。 我浏览了yepnope文档，但没有看到任何提及。

这是我的代码（在文档底部：

<script src="js/jquery.js"></script>
<script src="js/jquery-ui-1.9.1.custom.min.js"></script>
<script src="js/jquery.infieldlabel.min.js"></script>
<script src="js/jquery.colorbox-min.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/jquery.validate.min.js"></script>
<script src="js/modernizr.js"></script>
<script type="text/javascript">
Modernizr.load([
    {
    // Let's check something simple
    test : Modernizr.borderradius,
    // this should then satisfy the yep and load this script
    yep : ['js/jquery.selectBoxIt.min.js']
    }
]);
</script>
</body>

Answer 1

只需将上面的静态JS代码添加到函数中，然后将其放入$（document）.ready（）-这将确保在调用脚本时加载jquery。 如果这不可行，请尝试使用javascript加载jquery，然后在回调中放置静态JS。 参考动态加载jQuery

Answer 2

做到没有jQuery：

function init(){
  Modernizr.load([
  {
  test : Modernizr.borderradius,
  yep : ['js/jquery.selectBoxIt.min.js']
  }
  ]);
}
document.addEventListener('DOMContentLoaded', init, false)

Answer 3

我本人对Modernizr / yepnope还是很陌生，但是从yepnode文档中，我相信关键是使用yepnope（或Modernizr，它们是同一回事）以正确的顺序加载所需的脚本，并且yepnope将确保它们按照您指定的顺序执行。

因此，我相信您所需要的是这样的：

<script src="js/modernizr.js"></script>
<script type="text/javascript">   

Modernizr.load([
    {
        // Load jQuery first
        load : ['js/jquery.js', 
                // ... and your other JS files
               ]
    },
    {
        // Let's check something simple
        test : Modernizr.borderradius,
        // this should then satisfy the yep and load this script
        yep : ['js/jquery.selectBoxIt.min.js']
    }
]);

</script>

另外，请查看这些yepnode文档中的示例，在该示例中，他们尝试从CDN加载jquery，如果加载不成功，则回退到本地副本-这使我更清楚。